2020-10-25
Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。
什么是DOM?
网页由HTML和CSS文档组成。浏览器用于创建文档的描述被称为文档对象模型(DOM)它使Javascript能够访问和操作也米娜的样式，该模型构建在基于对象的结构中并定义：
.Html元素作为对象.
.Html元素的属性和事件
.访问html元素的方法
DOM树的结构图：
HTML DOM模型
元素的位置称为节点，不仅元素获得节点，而且元素和文本的属性也有它们自己的节点（属性的节点和文本的节点）
*所有的Node(元素、属性、文本)对象 都是document的子代节点
节点的三大属性：
1.nodeType 节点类型 number
document 9
element 标签元素 1
attrbute 属性名 2
text 文本 3
2.nodeName 节点名
document #document
标签元素 全大写的标签名
attitude 属性名
文本节点 #text
3.nodeValue 节点值
document null
标签元素 null
attribute 属性值
text 文本的内容
节点间的关系
1） 父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的直接子代节点
node.firstChild 获得node下的第一个子节点
node.lastChild 获得node下最后一个子节点
2）兄弟关系
node.previusSibling 返回当前节点的前一个兄弟节点
node.nextSibling 返回当前节点的下一个兄弟节点
查找HTML元素方法
1 .其中 三个元素不需要找，直接用
document.documentElement
document.head
document.body
2.按id查找 (只能通过document调用 该方法定义在Document.prototype所以Element节点上不能使用)
语法：document.getElementById(‘id名’);
3.按标签名查找：定义在Document.prototype和Element.prototypes上
/查询指定父元素下指定标签的元素对象集合 （所有子代元素对象）
语法：document.getElementsByTagName(“标签名”)
4.按name属性查找 动态数组 Document.prototype/HTMLDocument.prototype上只能通过 document调用
语法：document.getElementsByName(“name名”)
5.按class属性查找 IE的兼容性问题
查找任意父元素下指定calss属性的元素对象 返回一个集合
查找到所有的后代子元素
语法:document.getElementsByClassName(“class名”);
原文链接：https://blog.****.net/weixin_45846805/article/details/103827156?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160363506819195264721633%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160363506819195264721633&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-5-103827156.first_rank_ecpm_v3_pc_rank_v2&utm_term=dom%E5%9F%BA%E7%A1%80&spm=1018.2118.3001.4187