Node 的属性
通用属性
-
nodeName: 获取节点名称
获取节点标签名称
-
nodeType: 获取节点类型
返回的是一个数字代表节点类型
节点类型对应表
返回当前node的相关节点的属性
-
ownerDocument: 返回当前节点元素的顶层对象-document
- nextSibling （获取下一个兄弟节点）和 nextElementSibling （获取下一个兄弟元素节点）的区别
previousSibling (获取上一个兄弟节点) 和 previousElementSibling (获取上一个兄弟元素节点)的区别
<body>
<div>
<p>这是一个p标签</p>
<span>这是一个span标签</span>
</div>
</body>
<script type="text/javascript">
let p = document.getElementsByTagName("p")[0];
console.log("p.nextSibling:",p.nextSibling);
console.log("p.nextElementSibling:",p.nextElementSibling);
console.log("span.previousSibling",span.previousSibling);
console.log("span.previousElementSibling",span.previousElementSibling);
</script>
nextSibling 获取的是紧挨着兄弟节点，如果有换行，获取的就是换行文本。而nextElementSibling 获取的是下一个标签元素的兄弟节点
同理 previousSibling 也是一样的思路
<!--改成一行以后-->
<div>
<p>这是一个p标签</p><span>这是一个span标签</span>
</div>
因为从节点类型定义可以知道，元素类型的节点 和 文本节点都属于 Node, 所以只是采用获取相邻兄弟节点，而不是相邻兄弟元素节点时，也会获取换行的文本节点。
-
parentElement (获取父级元素节点) 和parentNode (获取父级节点) 的区别
因为 document_node 并不是元素节点，它的nodeType值为9
当前 node 的内容属性
- innerHTML 和 innerText 的区别
innerHTML： 设置或者返回html标签的直接内容，即
document.body.innHTML = "<div>inHTML</div>"能直接将 div 元素插入到body元素中
innerText： 设置或者返回 文本内容，即
document.body.innHTML = "<div>inHTML</div>"只是单纯的将引号之间的字符直接当作字符串插入到 body 中
- textContent 设置或返回文本内容
textContent 和 innerText 的区别： - innerText 只有 HTML 元素才可调用，而textContent 任意的 node 节点都可以调用
- innerText的值依赖于浏览器的显示，textContent 依赖于代码的显示
<div>
<span>这是第一个span</span>
<span>这是第二个span</span>
</div>
- innerText 属性值的获取会考虑CSS样式，因此读取 innerText 的值将触发回流以确保计算出的样式是最新的，而回流在计算上很昂贵，会降低性能，因此应尽可能避免回流。而textContent只是单纯读取文本内容，因此性能更高。
-
nodeValue 返回文本节点的值，只对文本节点有用，其他类型的节点值该属性返回null
返回当前 node 的子节点的相关属性
代码样例：
<div>
<p>这是一个p标签</p>
<span>这是一个span标签</span>
</div>
- firstChild (获取第一个子节点) 和 firstElementChild (获取第一个子元素节点)
firstChild 会获取到回车文本节点，而 firstElementChild 获取到的是第一个元素节点
- lastChild (获取最后一个节点) 和 lastElementChild (获取最后一个元素节点)
和 first 方法同理
-
childNodes (获取所有子节点) 和 children (获取所有子元素节点)
childNodes不单单会获取元素节点还会获取文本节点等其他节点，而children只会获取HTML元素节点
node 的方法
节点的增删改查
- appendChild 向后追加子节点
- insertBefore 向前添加子节点
- cloneNode 克隆子节点
- removeChild 删除子节点
节点的判断
- hasChildNodes 判断是否有子节点
- contains 判断是否包含指定的子节点
- isEqualNode 判断两个节点是否相等
HTML元素操作方法
元素位置的相关属性
- offsetParent 和 offsetTop, offsetLeft (有定位的父元素的相对偏移量)
offsetParent: 是一个只读属性，返回一个指向最近的(包括层级上最近的)父级定位元素（position 不为 static）或者最近的
table,td,th,body元素。当元素的display为none即元素隐藏时，offsetParent返回为 null
offsetLeft: 返回当前元素相对于其
offsetParent元素的左部内边距的距离。
offsetTop: 返回当前元素相对于其
offsetParent元素的顶部内边距的距离。
代码示例：
<div id="position-outside" style="position: relative;">
<div id="position-inside" style="position: absolute;">
<div id="position-static" style="position: static;">
<div id="box">
<div id="box-inside" style="position: absolute; left: 20px; top: 40px;"></div>
<div id="box-hidden" style="display: none; position: absolute; left: -20px; top: -40px;"></div>
</div>
</div>
</div>
</div>
box 和 boxInside 的offsetParent均为最近的有定位且定位不为static的父级元素
因为 box-hidden 的 display 为 hidden 导致它没有 offsetParent 所以 offsetLeft, offsetTop 属性均为 0
元素宽高的相关属性
offsetWidth,offsetHeight 和 clientWidth,clientHeight 的区别
offsetWidth,offsetHeight 元素宽高，包括内边距(不包括外边距)，边框，滚动条
clientWidth,clientHeight 元素宽高，包括内边距，但不包括外边距，边框，滚动条
offsetWidth(Height) 比 clientWidth(Height) 多了边框和滚动条的距离
div {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 1px solid red;
}
多了两侧边框的距离
网友评论