DOM补充

2019-06-02

DOM 属性节点

Element.className
className 属性用来读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割。

// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById("myDiv");
div.className;
// "one two three"

Element.style
每个元素节点都有 style 用来读写该元素的行内样式信息
不过，连词号需要变成骆驼拼写法。

var divStyle = document.querySelector("div").style;
divStyle.backgroundColor = "red";
divStyle.border = "1px solid black";
divStyle.width = "100px";
divStyle.height = "100px";
divStyle.fontSize = "10em";

divStyle.backgroundColor; // red
divStyle.border; // 1px solid black
divStyle.height; // 100px
divStyle.width; // 100px

Element.style返回的只是行内样式，并不是该元素的全部样式。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到。

获取属性和设置属性（自定义属性）

Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回 null。

1 2	var mydiv = document.getElementById("mydiv"); var id = mydiv.getAttribute("id");

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

// HTML 代码为
// <button>Hello World</button>
var b = document.querySelector("button");
b.setAttribute("name", "myButton");
b.setAttribute("disabled", true);

Element.removeAttribute方法移除指定属性。该方法没有返回值。

1	document.getElementById("div1").removeAttribute("id");

outerHTML 包括整个标签，而不仅限于标签内部的内容
innerText 只获取元素内的文本内容，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()得到。

行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。

window.getComputedStyle方法，就用来返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数，返回一个 CSSStyle 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。

1
2
3

var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);(只能获取样式，不能设置)
styleObj.backgroundColor

上面代码中，得到的背景色就是 div 元素真正的背景色

兼容性问题
低版本 ie 使用
box.currentStyle 获取全部样式

box.insertBefore(newNode, existNode) 插入节点

在 box 的子节点 existNode 前面插入一个新节点

document.createTextNode() 创建文本节点

1 2	var t = document.createTextNode("你好"); box.appendChild(t);

在 box 尾部添加一个文本节点

offsetWidth/offsetHeight

Element.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border

Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。
这两个属性都是只读属性

如果元素的 CSS 设为不可见（比如 display: none;），则返回 0

Element.offsetParent属性返回最靠近当前元素的、并且 CSS 的 position 属性不等于 static 的上层元素。

<div style="position: absolute;">
  <p>
    <span>Hello</span>
  </p>
</div>

上面代码中，span 元素的 offsetParent 属性就是 div 元素。

该属性主要用于确定子元素位置偏移的计算基准，
Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。

offsetLeft/offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移

本文作者：人模人样的搬砖老段
本文链接：DOM 补充
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/02/02