带你走进从零认识JavaScript到精髓（十五）JavaScript的文档对象模型DOM

一、 DOM上

1. DOM的概念

​ 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。DOM是“Document Object Model”（文档对象模型）的首字母缩写。

1.1 DOM树

HTML文档中的所有节点组成了一个文档树模型，文档中的每个元素、属性、文本等都代表着树中的一个节点，再由这些节点组成一个树状结构（DOM Tree）。

1.2 节点关系

节点树中的节点彼此拥有层级关系。

我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

HTML文档中的每一个成分都是一个节点

• 整个文档是一个**文档节点**
• 每个HTML标签是一个**元素节点**
• 包含在HTML元素中的文本是**文本节点**
• 每一个HTML属性是一个**属性节点**
• 注释属于**注释节点**

1.3 节点属性

单词: node ,节点是分为多种类型的

节点种类： 元素节点、 属性节点、 文本节点 、 注释节点 、 文档节点

nodeType： 1 2 3 8 9 // 返回元素的节点类型

nodeName 分别是 : Element , Attr, #text , #comment、 #document // 返回元素名

nodeValue 分别是： null , 属性值, 文本， 注释文本， null // 返回元素的节点值

节点的几个属性: nodeName、nodeType 和 nodeValue。

document.getElementById("demo").tagName; // P

1.4 文档的写入

10-3.1 document.write()

10-3.2 document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符

1.5 查找元素

通过id属性值获取：document.getElementById() // 返回拥有指定ID的第一个对象的引用

通过标签名称获取：document.getElementsByTagName() // 返回带有指定标签名的对象的集合-数组

通过class属性值获取：document.getElementsByClassName() // 返回带有指定class名称的对象的集合-数组

通过name属性值获取：document.getElementsByName() // 返回带有指定name名称的对象的集合-数组

1.6 元素属性

元素.innerHTML // 属性设置或返回表格行的开始和结束标签之间的 HTML

元素.innerText // 从起始位置到终止位置的内容

元素.getAttribute(‘id’) // 获取属性

元素.setAttribute(‘class’,‘box’) // 设置属性

outerHTML:

除了包含innerHTML的全部内容外, 还包含对象标签本身。

总结

以上就是今天带你走进从零认识JavaScript到精髓（十五）JavaScript的文档对象模型DOM
会持续更新中…
原创不易，期待您的点赞关注与转发评论😜😜😜