2020.8.21

DOM

DOM就是由节点组成的

解析过程

HTML加载完毕，渲染引擎会在内存中吧HTML文档，生成一个DOM树，然后操作的时候，修改节点的属性。

DOM可以做什么

1. 找元素节点

2. 设置元素的属性

3. 设置元素样式

4. 动态创建和删除元素

事件的触发响应

 

DOM对象的获取

document.getElementById("ID");
​
document.getElementsByTagName("div");
​
document.getElementsByClassName("className");
​
document.querySelector("css选择器");
​
document.querySelectorAll("css选择器");

 

创建节点

// 1 创建节点
  var h1 = document.creatElement("h3");
// 2 设置元素
  h1.innerHTML = "你好";
// 3 插入元素
  var d1 = document.querySelector(".d2");
// 4 追加元素
  d1.appendChild(h1);

 

设置节点操作

// 获取节点属性值
元素节点.getAttribute("属性名称");
// 设置节点属性值
元素节点.setAttribute("属性名称");
// 删除节点属性值
元素节点.removeAttribute("属性名称");

DOM对象的使用

1. value : 标签的value值

2. innerHTML : 标签及标签中的内容

3. innerText : 标签中的内容不包括标签

nodeType

nodeType == 1 标示元素节点

nodeType == 2 标示是属性节点

nodeType == 3 表示文本节点