HTML DOM

前言

• DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

• HTML DOM 定义了访问和操作 HTML 文档的标准方法。是把 HTML 里面的各种数据当作对象进行操作的一种思路。

• HTML DOM 以树结构表达 HTML 文档。

• HTML DOM 教程（w3cschool）

• HTML DOM 教程（runoob）

• JavaScript 和 HTML DOM 参考手册

• HTML DOM 快速入门

• HTML/CSS/JS 在线工具

1、节点概念

• DOM 把所有的 HTML 都转换为节点。

  • 整个文档 是一个节点
  • 元素 是节点
  • 元素属性 是节点
  • 元素内容 是节点
  • 注释 也是节点

• 节点示意图

  

2、获取节点

• 获取节点：JavaScript 是解释语言，是顺序执行的，对节点的获取要放在 HTML 标签加载后。

关键字	简介	示例代码
document	文档节点
getElementById	通过 id 获取元素节点	var div1 = document.getElementById("d1");
getElementsByTagName	通过标签名称获取元素节点	var divs = document.getElementsByTagName("div");
getElementsByClassName	通过类名获取元素节点	var elements = document.getElementsByClassName("d");
getElementsByName	通过表单元素的 name 获取元素节点	var elements = document.getElementsByName("userName");
attributes	获取属性节点。 nodeName 和 nodeValue 表示一个节点的名称和值	var as = div1.attributes; as[i].nodeName; as[i].nodeValue;
childNodes	获取内容节点。 获取所有的子节点，其中第一个子节点，就是其内容节点	var content = div1.childNodes[0]; content.nodeName; content.nodeValue;

3、节点的属性

• 节点的属性

关键字	简介	示例代码
nodeName	节点名称	document.nodeName; // #document div1.attributes[0].nodeName; // id
nodeValue	节点值	document.nodeValue; // null div1.attributes[0].nodeValue; // d1
nodeType	节点类型 元素：1 属性：2 文本：3 注释：8 文档：9	document.nodeType; // 9 div1.attributes[0].nodeType; // 2
innerHTML	元素的文本内容	document.getElementById("d1").childNodes[0].nodeValue = "通过 childNode[0].value 改变内容"; document.getElementById("d1").innerHTML = "通过 innerHTML 改变内容";
id value className	元素上的属性。 元素上的属性，可以通过 . 直接访问。 如果是自定义属性，那可以通过如下两种方式来获取。        getAttribute("test")        attributes["test"].nodeValue	var input1 = document.getElementById("input1"); input1.id; input1.value; input1.className;

4、样式

• 一个元素节点的 style 属性即对应的 css。

  var d = document.getElementById("d");
      
  d.style.display = "none";
  d.style.backgroundColor = "green";

5、事件

• DOM 的事件有很多，下表把工作中常用的事件列出来。

关键字	简介	示例代码
onfocus onblur	焦点事件。 当组件获取焦点的时候，会触发 onfocus 事件。 当组件失去焦点的时候，会触发 onblur 事件。
onmousedown onmouseup onmousemove onmouseover onmouseout	鼠标事件。 当在组件上鼠标按下的时候，会触发 onmousedown 事件。 当在组件上鼠标弹起的时候，会触发 onmouseup 事件。 当在组件上鼠标经过的时候，会触发 onmousemove 事件。 当在组件上鼠标进入的时候，会触发 onmouseover 事件。 当在组件上鼠标退出的时候，会触发 onmouseout 事件。
onkeydown onkeypress onkeyup	键盘事件。 当在组件上键盘按下的时候，会触发 onkeydown 事件。 当在组件上键盘按下的时候，也会触发 onkeypress 事件，只能获取字符键。 当在组件上键盘弹起的时候，会触发 onkeyup 事件。
onclick ondblclick	点击事件。 当在组件上单击的时候，会触发 onclick 事件。 当在组件上双击的时候，会触发 ondblclick 事件。
onchange	变化事件。 当组件的值发生变化的时候，会触发 onchange 事件。
onsubmit	提交事件。 当 form 元素 @ 提交的时候，会触发 onsubmit 事件。	<form action="/study/login.jsp" onsubmit="login()">
onload	加载事件。 当整个文档加载成功，或者一个图片加载成功，会触发加载事件。
this	当前组件。 表示触发事件的组件，可以在调用函数的时候，作为参数传进去。	<input type="button" onclick="singleClick(this)" value="演示 this 的按钮 1" > function singleClick(button) { }
return false	阻止事件的发生

• 阻止事件的发生

  <form method="post" action="/study/login.jsp" onsubmit="return login()">
      账号：<input id="name" type="text" name="name"> <br />
      密码：<input type="password" name="password"> <br />
      <input type="submit" value="登录">
  </form>
  
  <script>
      function login() {
          var name = document.getElementById("name");
          if (name.value.length == 0) {
              alert("用户名不能为空");
              return false;
          }
          return true;
      }
  </script>

6、节点关系

• 节点关系

关键字	简介	示例代码
parentNode	父节点关系	node.parentNode;
previousSibling nextSibling	同胞节点关系	d2.previousSibling;
childNodes	子节点关系。 firstChild 第一个子节点。 lastChild 最后一个子节点。 childNodes 所有子节点。	div.childNodes;

• childNodes 和 children 都可以获取一个元素节点的子节点。

  • childNodes 会包含文本节点
  • children 会排除文本节点

7、创建节点

• 创建节点

关键字	简介	示例代码
createElement	创建元素节点	var hr = document.createElement("hr");
createTextNode	创建文本节点	var text = document.createTextNode("这是通过 DOM 创建出来的 <p>");
createAttribute	创建属性节点	var href = document.createAttribute("href"); href.nodeValue="http://12306.com"; a.setAttributeNode(href);

8、删除节点

• 删除节点

关键字	简介	示例代码
removeChild	删除元素节点	parentDiv.removeChild(div2);
removeAttribute	删除属性节点	link.removeAttribute("href");
removeChild	删除文本节点	var textNode = parentDiv.childNodes[0]; parentDiv.removeChild(textNode);

9、替换节点

• 替换节点

关键字	简介	示例代码
replaceChild	替换节点	parentDiv.replaceChild(d4, d3);

10、插入节点

• 插入节点

关键字	简介	示例代码
appendChild	追加节点	parentDiv.appendChild(d4);
insertBefore	在前方插入节点	parentDiv.insertBefore(d25, d3);

11、常用场景

• 常用场景

12、表格排序

• 表格排序