当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
DOM是“Document Object Model”（文档对象模型）的首字母缩写。
什么是DOM？
文档对象模型 -通过dom可以动态改变文档的内容
动态改变文档内容的原理：
1.解析dom树（如HTML）并生成DOM树
2.通过DOM标的接口+编程语言改变文档的内容
DOM节点
在HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的HTML。
HTML文档中的所有内容都是节点：
整个文档是一个文档节点
每个HTML 元素是元素节点
HTML元素内的文本是文本节点
每个HTML 属性是属性节点
注释是注释节点
DOM节点的关系
n节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述 这些 关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点
DOM树形结构
HTML DOM 节点树
HTML DOM 将 HTML文档视作树结构。这种结构被称为节点树：
DOM节点类型
节点属性
1.nodeName
定义和用法
nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
如果节点是属性节点，则 nodeName 属性返回属性的名称。
文本节点的nodeName 永远 #text
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。
2.nodeValue
定义和用法：nodeValue属性设置或返回指定节点的节点值。
注释：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值（element.childNodes[0].nodeValue）。
对于元素节点，因为本身不直接包含文本，所以nodeValue是不可用的。返回永远是null
3.nodeType
定义和用法：nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点，则 nodeType 属性将返回 1。
如果节点是属性节点，则 nodeType 属性将返回 2。
如果节点是文本节点，则 nodeType 属性将返回 3。
如果节点是注释节点，则 nodeType 属性将返回 8。
getElementById()
getElementById()方法可返回对拥有指定ID 的第一个对象的引用。
在操作文档的一个特定的元素时，最好给该元素一个id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该ID 查找想要的元素。
getElementsByName()
getElementsByName()方法可返回带有指定名称的对象的集合。
语法：document.getElementsByName(name)
另外，因为一个文档中的name 属性可能不唯一（如HTML 表单中的单选按钮通常具有相同的name 属性），所有getElementsByName()方法返回的是元素的数组，而不是一个元素
getElementsByTagName()
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。（数组）
getElementsByTagName()方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
注释：传递给getElementsByTagName() 方法的字符串可以不区分大小
getElementsByClassName（）
返回文档中所有指定类名的元素集合
元素属性
innerHTML
innerHTML属性设置或返回标签的开始和结束标签之间的HTML
outerHTML
outerHTML.当前元素的开始标记和结束标记之间的所有文本和HTML标签
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 设置或获取位于对象起始和结束标签内的文本
四者的区别
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于： 1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。
getAttribute()
getAttribute()方法返回指定属性名的属性值
setAttribute()
setAttribute()方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值
语法： element.setAttribute(属性名,属性值)
tagName
tagName 属性返回被选元素的标签名
语法：elementNode.tagName
与nodeName的区别： tagName只能用在元素节点上；而nodeName可以用在任何的节点上。
网友评论