DOM
DOM(Document Object Model) 文档对象模型
DOM把文档表示为一棵树，整个文档就是一个树形结构。
在常见的网页结构中，<html>为根标签，下面又有<heab>、<body>两个子标签，子标签下面又有多个子标签，依次向下就形成了一个树形结构。
节点
一个节点就是一个网络的连接点，网络就是由多个节点组成的集合。 元素中每个节点都是一个对象。
DOM中有不同的节点，常见的三种是：
- 元素节点：DOM的原子是元素节点。一般是标签。
- 属性节点：标签中的文本。
- 文本节点：标签的一些属性值。
获取元素
getElementById("value"):根据元素的id属性值来获取元素，由于id属性是唯一的，所以获取的是单个元素。getElementsByTagName("tagName"):根据元素的标签来获取元素，最后的结果是一个元素的集合。getElementsByClassName("className"):根据元素的class属性值来获取元素，最终的结果是一个元素的集合。
获取跟设置属性值
getAttribute("attr"):根据属性名称来获取属性值。例如获取<a>标签中的href属性值：node.getAttribute("href");。
setAttribute("attr"，“value"):给属性设置值，比如给<a>标签设置href值：node.setAttribute("href","https://www.baidu.com");
事件处理
- 点击事件：
onclick = "javascritp statement(s)" - 鼠标悬停事件：
onmouseover = "javascritp statement(s)" - 鼠标移开事件：
onmouseout = "javascritp statement(s)" - 元素获得焦点：
onfocus = "javascritp statement(s)" - 元素失去焦点：
onblur = "javascritp statement(s)" - 用户改变域的内容：
onchange = "javascritp statement(s)" - ......
childNodes属性
childNodes属性可以获取任何一个元素的所有子元素，返回改元素所有子元素的数组。
nodeType属性
由于childNodes返回的元素数组中的元素包含元素节点、属性节点以及文本节点。此时可以根据nodeType的属性值来判断该元素：
- 元素节点的nodeType属性值是1
- 属性节点的nodeType属性值是2
- 文本节点的nodeTyoe属性值是3
nodeValue属性
nodeValue可以用来改变或者设置一个文本属性的值。node.nodeValue获取该节点文本属性的值node.nodeValue = "value"设置文本属性的值
firstChild跟lastChild
firstChild意思等同于childNodes[0]，即该节点的第一个子节点
反之，lastChild就是获取该节点的最后一个子节点
posted on
浙公网安备 33010602011771号