日度归档：2020年7月3日

HTML学习笔记

发表评论

DOM

DOM - Document Object Model
This model can be described as a tree structure:
                      Document
                         |
                Root element:<html>
                         |
             ————————————————————————
            |                        |
   Element:<head>              Element:<body>
            |                        |
            |               ———————————————————
   Element:<title>         |                   |
            |          Element:<a>         Element:<h1>
            |       Attribute: "href"          |
            |              |                   |
   Text:"my title"   Text:"my link"       Text:"my header"

DOM是W3C（万维网联盟）的标准，它定义了访问HTML和XML文档的标准：W3C-DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C-DOM分成3个不同的部分：
· 核心DOM：针对任何结构文档的标准模型
· XML DOM：针对XML文档的标准模型
· HTML DOM：针对HTML文档的标准模型

这里对HTML DOM进行详述
关于HTML DOM，它是：
· HTML的标准对象模型
· HTML的标准编程接口
· W3C标准

HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。

在HTML DOM中，所有事物都是节点（Node）。DOM是视为节点树的HTML。
· 整个文档是一个文档节点
· 每个HTML元素是元素节点
· HTML元素内的文本是文本节点
· 每个HTML属性是属性节点
· 注释是注释节点

关于节点的图述

HTML DOM方法和属性
HTML DOM方法是我们可以在节点上执行的动作。
HTML DOM属性是我们可以在节点设置和修改的值。

可通过JavaScript（或其他编程语言）对HTML DOM进行访问。
所有HTML元素被定义为对象，而编程接口则是对象的方法和属性。
方法是能执行的动作。属性是能够获取或设置的值。

如，一些常用的HTML DOM方法：
· getElementById
· appendChild
· removeChild
· getElementsByTagName
· getElementsByClassName
· replaceChild
· insertBefore
· createAttribute
· createTextNode
· getAttribute
· setAttribute

一些常用的HTML DOM属性：
· innerHTML – 获取元素内容
· parentNode
· childNode
· attributes

nodeName属性规定节点的名称↓↓

  • nodeName只读
  • 元素节点的nodeName与标签名相同
  • 属性节点的nodeName与属性名相同
  • 文本节点的nodeName始终是#text
  • 文档节点的nodeName始终是#document
  • nodeName始终包含HTML元素的大写字母标签名

nodeValue属性规定节点的值↓↓

  • 元素节点的nodeValue是undefined或null
  • 文本节点的nodeValue是文本本身
  • 属性节点的nodeValue是属性值

nodeValue属性规定节点的值↓↓

  • 元素节点的nodeValue是undefined或null
  • 文本节点的nodeValue是文本本身
  • 属性节点的nodeValue是属性值
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

nodeType属性：返回节点的类型，nodeType是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

访问HTML元素等同于访问节点，可通过不同方式来访问HTML元素：

  • getElementById()
  • getElementsByTagName()：返回节点列表，为一个节点数组，如：
    var x = document.getElementsByTagName(“p”);
    可以通过下标访问节点，如访问第二个：y=x[1]，x.length为节点列表长度，返回的根节点不含样式，子节点包含所有的样式
  • getElementsByClassName()

HTML DOM的修改=改变元素、属性、样式和事件

  • 增删HTML元素
    创建：追加到已有元素上
    <div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是第二段落</p>
    </div>
    <script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是个新段落");
    para.appendChild(node);
    var ele = document.getElementById("div1");
    ele.appendChild(para);
    </script>
    appenChild()是讲元素作为父元素的最后一个子元素进行添加，用insertBefore()插在元素前
    删除：removeChild()
    替换：replaceChild()
  • 改变HTML内容：最简单的方法是使用innerHTML属性
    （除了innerHTML，还可用childNodes和nodeValue属性获取元素内容，详见参考手册）
    <p id="p1">Hey</p>
    <script>
    document.getElementById("p1").innerHTML = "新内容在这";
    </script>
  • 改变CSS样式
    <p id="p1">hey</p>
    <p id="p2">world</p>
    <script>
    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "larger";
    </script>
  • 改变HTML元素的属性
  • 改变事件
    HTML DOM允许在事件发生时执行代码
    当HTML元素“有事情发生”时，浏览器会生成事件：
    ~在元素上点击
    ~加载页面
    ~改变输入字段
    e.g. <input type="button" onclick="document.body.style.backgroundColor = 'lavender';" value="修改背景颜色" />

也可以：
<script>
function changeBg()
{
document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="changeBg()" value="修改背景色" />

HTML DOM允许JavaScript对HTML事件做出反应，当事件发生时，可以执行JavaScript，如用户点击某个元素时执行代码，则把JS代码添加到HTML事件属性中：onclick=JavaScript
HTML事件例子：
~用户点击鼠标时
~网页已加载
~图片已加载
~鼠标移动到元素上
~输入字段被改变
~HTML表单被提交时
~用户触发按键时

以下两个方式等效：
a) <button onclick="displayDate()">点我</button>
b) document.getElementById("myBtn").onclick = function(){dispalyDate()};

onload，onunload，onchange
用户进入或离开页面时，会触发onload和onunload事件
onload事件可用于检查方可的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload和onunload事件都可用于处理cookies
onchange事件常用于输入字段的验证，如：
<input type="text" id="fname" onchange="upperCase()" />

HTML DOM 事件对象参考手册：
https://www.w3school.com.cn/jsref/index.asp
https://www.runoob.com/jsref/jsref-tutorial.html

DOM根节点的两个特殊属性可以访问全部文档
~ document.documentElement 全部文档
~ document.body 文档主体