JavaScript HTML DOM

DOM，即Document Object Model。当网页被加载时，浏览器会创建页面的文档对象模型，而HTML DOM模型所采用的数据结构为树，即把HTML中的信息，构造成一棵树。

通过DOM模型和JavaScript，可以实现访问并操作HTML文档的所有元素以及其他各种功能：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找HTML元素

通过id查找

var x = document.getElementById("demo");

通过标签名查找
```
var y = x.getElementsByTagName("p");
```

通过类名查找

var x = document.getElementsByClassName("intro");

（一些常用的API）

document.getElementById(id)：根据id获取元素
document.getElementsByTagName(name)：根据tag获取元素
document.createElement(name)：创建元素
parentNode.appendChild(node)：添加子元素
element.innerHTML：设置/获取元素内容
element.styles：设置/获取元素样式
element.setAttribute()：设置元素属性值
element.getAttribute()：获取元素属性值
element.addEventListener()：添加事件绑定
- addEventListener中有三个参数
  - 第一个为Event(事件的类型)，例如"click" "mousedown"(注意没有“on”!!!)
  - 第二个为事件触发后执行的函数
  - 第三个为--useCapture，默认为false，用来选择使用冒泡还是捕获
    - 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素
    - 在捕获中，外部元素的事件会先被触发，然后才会触发内部元素

谨记DOM中采用的数据结构其实就是树

创建新的HTML元素（树的结点）

appendChild() 将新结点插入到尾部位置

var para = document.createElement("p");
var node = document.createTextNode("这是新创建的段落内容");
// 将node添加到<p>元素中
para.appendChild(node);
// 把p元素添加到已存在的元素中
document.getElementById("demo").appendChild(para);

insertBefore() 将新结点插入到开始位置

var para = document.createElement("p");
var node = document.createTextNode("这是新创建的段落内容");
// 将node添加到<p>元素中
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);

replaceChild() 替换HTML元素
removeChild(child) 移除已存在的元素

HTMLCollection

使用 getElementsByTagName() 方法可以返回一个 HTMLCollection 对象 (类似一个包含HTML元素的一个数组)

Javascript DOM 学习笔记