HTML DOM

HTML DOM 定义了访问和操作 HTML 文档的标准。

 1.HTML DOM 节点

下图为HTML DOM 节点树:

 2.HTML DOM 方法

常用的dom对象方法:

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

eg:

     // 动态创建
        dynamicCreated: function(val) {
          var div = document.getElementById(this.yy);
          div.innerHTML="";
          if (val.length != 0) {
            // 获取div
            for (let i = 0; i < val.length; i++) {
              var img = document.createElement("img");
              var div1=document.createElement("div");
              img.src =
                "http://XXXX" +
                val[i].emp_no +
                "XXXXX";
              img.style.marginLeft = "10px";
              img.style.height = "130px";
              img.style.width = "100px";
 
              let no = val[i].emp_no;
              let name = val[i].emp_name;
              var p=document.createElement("p");
              var p1=document.createElement("p");
              p.width="130px";
              p1.width="130px";
              p.slot="title";
              p1.slot="title";
              p.innerHTML="工號:"+no;
              p1.innerHTML="姓名:"+name;
              p.style.textAlign="center";
              p1.style.textAlign="center";
              div1.style.width="130px";
              div1.appendChild(img);
              div1.appendChild(p);
              div1.appendChild(p1);
              div1.style.display="inline-block";
              div.appendChild(div1);
            }  
           } else {
              var text = document.createElement("text");
              text.innerHTML = "<strong>暫無數據</strong";
              text.style.fontSize="14px";
              div.appendChild(text);
            }               
        },     

3.HTML DOM 属性

innerHTML属性:

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

eg:

var txt=document.getElementById("intro").innerHTML;
document.write(txt);

nodeName 属性规定节点的名称。

• nodeName 是只读的
• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

注意： nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性规定节点的值。

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

eg:

x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

4.方法和属性的区别

1.HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

2.HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

5.HTML DOM 访问

• 通过使用 getElementById() 方法
• 通过使用 getElementsByTagName() 方法
• 通过使用 getElementsByClassName() 方法

6.HTML DOM - 修改

• 改变 HTML 内容
• 改变 CSS 样式
• 改变 HTML 属性
• 创建新的 HTML 元素
• 删除已有的 HTML 元素
• 改变事件（处理程序）

document.getElementById("p1").innerHTML="新文本!";

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

//使用事件,HTML DOM 允许您在事件发生时执行代码。当 HTML 元素"有事情发生"时，
//浏览器就会生成事件：在元素上点击,加载页面,改变输入字段等
<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

如需删除HTML DOM 中的元素,removeChild()方法;

如需插入HTML DOM 中的元素并插入到前面，您可以使用 insertBefore() 方法：

eg:

<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 element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

运行结果:

这是一个新段落。

这是一个段落。

这是另外一个段落。

7.HTML DOM - 事件

eg:

• 当用户点击鼠标时
• 当网页已加载时
• 当图片已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户触发按键时

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

<button onclick="displayDate()">点我</button>

<body onload="checkCookies()">

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>


<div onmousedown="mDown(this)" onmouseup="mUp(this)" 
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>

使用 HTML DOM 来分配事件:

document.getElementById("myBtn").onclick=function(){displayDate()};

8.HTML DOM 导航

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

<script>
x=document.getElementsByTagName("p");
document.write("第二个段落的 innerHTML 内容为: " + x[1].innerHTML);
</script>

可以使用 length 属性来循环节点列表：

x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{ 
    document.write(x[i].innerHTML);
    document.write("<br>");
}

能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航。

document.documentElement - 全部文档

document.body - 文档的主体

除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

txt=document.getElementById("intr1").childNodes[0].nodeValue;
document.write(txt);