JS DOM初识

document对象，以及DOM节点分类

文档流结构概览

document对象是HTML文档的根节点，同时它也是window对象的一部分，也可以通过window.document 获取。

window.document 实际上也就是 document

HTML 中个元素都是一个节点，文档是一个文档document节点，所有的HTML标签都是一个元素节点，HTML标签的属性是一个属性节点，文本插入到HTML标签下是文本节点。注释是注释节点。

document 对象分析

访问 document 对象原型也能概览该对象下的全部属性和方法

document.__proto__

文档内部的子节点

1. doctype

   
   返回文档的类型

2. documentElement

   
   返回整个html文档结构

3. body

   
   返回html文档的body部分

4. head

   
   返回html文档head部分

文档的指定信息

1. documentURI 和 URL

   
   返回当前网址

2. domain

   
   返回当前网站域名

3. lastModified

   
   返回当前页的最新修改时间

4. location

   
   image.png

5. title

   
   返回文档标题

6. readyState

   
   返回文档当前状态
   

   有三个状态：

loading (加载HTML代码阶段，尚未解析完成)

intercative (加载外部资源)

complete (全部加载完成)

文档内部特定节点集合

1. anchors

   
   获取所有锚点的名称，注意这需要 a 标签上定义了 name 属性

2. forms

   
   获取html文档中所有表单

3. images

   
   当前html文档中所有图片

4. links

   
   html文档中所有链接

5. scripts

   
   所有的script标签

获取指定元素的几种方式

1. getElementById //通过元素id属性获取,返回的是一个元素对象
2. getElementsByClassName //通过元素的class属性获取，返回的是一个符合该class名称的元素数组
3. getElementsByTagName //通过元素的标签获取，例如 a span div 等，返回的是一个符合标签名字的元素数组
4. getElementsByName //通过元素的name属性获取，返回的是一个元素数组
5. querySelector //通过CSS样式名称或id名称器，标签名称来获取，如果，有符合条件的则不再往下找，即返回第一个符合的元素节点
6. querySelectorAll //通过CSS样式名称或id名称器，标签名称来获取，但是是获取所有符合条件的元素节点，返回的是符合CSS样式名称的元素数组

getElement 和 querySelector 的区别

getElement 查询获取的元素是动态的，会随着文档流的改变而获取新的元素，要是循环或者递归调用时，可能会操作死循环。性能比较好但是操作比较麻烦，有时候可能需要多种方法组合才能获得到满足的元素。

querySelector 获取的元素是静态的，不会随着文档操作的改变而改变，操作比较方便，例如：querySelectorAll(".myDiv ul") == getElementsByClassName("myDiv").getElementsByTagName("ul")

总之，获取元素较少且不会被动态改变影响选择getElement，获取元素较多可以用querySelector。querySelectorAll 获取的是 NodeList 可以采用forEach,map 等遍历的方法。而getElementsByxxx 获取的是 HTMLCollection，只能采用 for 循环遍历。

---

操作页面元素

创建页面元素

1. createElement 创建元素节点
2. createTextNode 创建文本节点
3. createAttribute 创建属性节点

元素属性节点的操作

1. setAttribute(name,value) 设置属性
2. getAttribute(name) 根据属性名获取属性值
3. removeAttribute(name) 根据属性名删除属性

style 属性的操作

1. elementNode.style.[xxx] ，例如：
   div.style.width = "100px"
div.style.left = "-10px"
2. 操作 propertyValue
   1. setPropertyValue(name,value) 设置某个属性的值
   2. getPropertyValue(name) 根据属性名获取某个属性的值
   3. removePropertyValue(name) 根据属性名删除某个属性
      例如：div.style.setPropertyValue("width","100px") div.style.removePropertyValue("background")

setAttribute 和 setAttributeNode 的区别

setAttribute 有两个参数，第一个参数是属性名，第二个参数是属性值，例如：setAttribute("style","width:100px")

setAtrributeNode 的参数是 node，所以必须先创建一个属性节点，例如：

let myStyle = document.createAttribute("style");
div.setAttributeNode("myStyle");