DOM

最新推荐文章于 2022-07-24 01:33:02 发布

原创最新推荐文章于 2022-07-24 01:33:02 发布 · 172 阅读

CC 4.0 BY-SA版权

DOM的概念及作用

DOM 是 JavaScript 操作网页的api接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

document.scrollingElement属性返回文档的滚动元素

document.documentElement（即<html>）。这个属性返回的文档的根元素

document.scrollingElement.scrollTop;获取可视区域距离页面顶部的距离
document.scrollingElement.scrollTop = 0设置滚动条的距离页面顶面的距离

DOM的基本操作(查询、创建、添加，修改，删除)

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。

document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素

document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例）

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配	该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。

document.createElement方法用来生成元素节点，并返回该节点。

createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点

oDiv.appendChild(newDiv);把newDiv添加到oDiv内部的最后面

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。

如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

文档碎片 document.createDocumentFragment() 作为容器使用，可以避免频繁操作dom

属性节点

Element.className

className属性用来读写当前元素节点的class属性。

Element.style每个元素节点都有style用来读写该元素的行内样式信息 不过，连词号需要变成骆驼拼写法。
divStyle.width = '100px';
divStyle.height = '100px'; 
divStyle.fontSize = '10em';

获取属性和设置属性（自定义属性） Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回null。

var mydiv = document.getElementById('mydiv'); 
var id = mydiv.getAttribute('id');

Element.setAttribute方法用于为当前节点设置属性。如果属性已经存在，将更新属性值，否则将添加该属性。该方法没有返回值。

Element.removeAttribute方法移除指定属性。该方法没有返回值。	
document.getElementById('div1').removeAttribute('id')

outerHTML

outerHTML  包括整个标签，而不仅限于标签内部的内容
innerTextinnerText只获取元素内的文本内容，html标签将被忽略

获取孩子节点 childNodes和children

Element.children属性返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含零个成员

这个属性与Node.childNodes属性的区别是，它只包括元素类型的子节点，不包括其他类型的子节点。而childNodes属性包含空白节点

Element.firstElementChild属性返回当前元素的第一个元素子节点，
Element.lastElementChild返回最后一个元素子节点。如果没有元素子节点，这两个属性返回null。

兄弟节点

nextElementSibling 下一个节点
previousElementSibling 上一个节点

Element.nextElementSibling属性返回当前元素节点的后一个同级元素节点，如果没有则返回null。
Element.previousElementSibling属性返回当前元素节点的前一个同级元素节点，如果没有则返回null。
（分别对应的还有 firstChild，lastChild，nextSibling ，previousSibling方法不过这些个方法都能获取到文本节点）

Element.parentNode可以获取父节点

元素的全部样式要通过window.getComputedStyle()得到。