document对象，以及DOM节点分类
文档流结构概览
document对象是HTML文档的根节点，同时它也是window对象的一部分，也可以通过window.document 获取。
window.document 实际上也就是 document
HTML 中个元素都是一个节点，文档是一个文档document节点，所有的HTML标签都是一个元素节点，HTML标签的属性是一个属性节点，文本插入到HTML标签下是文本节点。注释是注释节点。
document 对象分析
访问 document 对象原型也能概览该对象下的全部属性和方法
document.__proto__
文档内部的子节点
-
doctype
返回文档的类型
-
documentElement
返回整个html文档结构
-
body
返回html文档的body部分
-
head
返回html文档head部分
文档的指定信息
-
documentURI 和 URL
返回当前网址
-
domain
返回当前网站域名
-
lastModified
返回当前页的最新修改时间
-
location
image.png
-
title
返回文档标题
-
readyState
返回文档当前状态
有三个状态：
loading (加载HTML代码阶段，尚未解析完成)
intercative (加载外部资源)
complete (全部加载完成)
文档内部特定节点集合
-
anchors
获取所有锚点的名称，注意这需要 a 标签上定义了 name 属性
-
forms
获取html文档中所有表单
-
images
当前html文档中所有图片
-
links
html文档中所有链接
-
scripts
所有的script标签
获取指定元素的几种方式
- getElementById //通过元素id属性获取,返回的是一个元素对象
- getElementsByClassName //通过元素的class属性获取，返回的是一个符合该class名称的元素数组
- getElementsByTagName //通过元素的标签获取，例如 a span div 等，返回的是一个符合标签名字的元素数组
- getElementsByName //通过元素的name属性获取，返回的是一个元素数组
- querySelector //通过CSS样式名称或id名称器，标签名称来获取，如果，有符合条件的则不再往下找，即返回第一个符合的元素节点
- querySelectorAll //通过CSS样式名称或id名称器，标签名称来获取，但是是获取所有符合条件的元素节点，返回的是符合CSS样式名称的元素数组
getElement 和 querySelector 的区别
getElement 查询获取的元素是动态的，会随着文档流的改变而获取新的元素，要是循环或者递归调用时，可能会操作死循环。性能比较好但是操作比较麻烦，有时候可能需要多种方法组合才能获得到满足的元素。
querySelector 获取的元素是静态的，不会随着文档操作的改变而改变，操作比较方便，例如：
querySelectorAll(".myDiv ul") == getElementsByClassName("myDiv").getElementsByTagName("ul")
总之，获取元素较少且不会被动态改变影响选择getElement，获取元素较多可以用querySelector。querySelectorAll 获取的是 NodeList 可以采用forEach,map 等遍历的方法。而getElementsByxxx 获取的是 HTMLCollection，只能采用 for 循环遍历。
操作页面元素
创建页面元素
- createElement 创建元素节点
- createTextNode 创建文本节点
- createAttribute 创建属性节点
元素属性节点的操作
- setAttribute(name,value) 设置属性
- getAttribute(name) 根据属性名获取属性值
- removeAttribute(name) 根据属性名删除属性
style 属性的操作
- elementNode.style.[
xxx] ，例如：
div.style.width = "100px"
div.style.left = "-10px" - 操作 propertyValue
- setPropertyValue(name,value) 设置某个属性的值
- getPropertyValue(name) 根据属性名获取某个属性的值
- 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");
网友评论