JavaScrip节点类型之Element节点-原创手记-慕课网

基本概念

Element类型用于表现HTML元素，提供了对元素标签名、子节点及属性的访问。

Element节点的基本属性

nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document或Element

*其中nodeName属性返回的标签名在HTML中始终都是以大写表示；nodeName也可以使用tagName属性替代。

Element节点的常用属性

element.childNodes：元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令，这意味着在执行某项操作以前，通常都要先检查一下nodeTpye属性。

例子：

<div>
    <p>0</p>
    <p>1</p>
    <p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];
for (var i = 0, len = div.childNodes.length; i < len; i++) {
    if (div.childNodes[i].nodeType === 1) {
        console.log(div.childNodes[i].innerHTML);
    }
};
//输出：0 1 2

element.children： children属性与childNodes的唯一区别是：children只返回元素中同样还是元素的子节点。

*IE8及更早版本的children属性中也会包含注释节点。

例子：

<div>
    <p>0</p>
    <p>1</p>
    <p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];
for (var i = 0, len = div.children.length; i < len; i++) {
    console.log(div.children[i].innerHTML);
};
//输出：0 1 2

childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild的元素版。
lastElementChild：指向最后一个子元素；lastChild的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

*由于元素间的空格，导致了在使用childNodes和firstChild等属性时的行为不一致，为了弥补这一差异，DOM元素添加了以上5个属性：

例子：

<div>
	<p>0</p>
	<p>1</p>
	<p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];

console.log(div.childElementCount); //输出：3
console.log(div.firstElementChild.innerHTML); //输出：0
console.log(div.lastElementChild.innerHTML); //输出：2

element.innerHTML：
在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记( 字符串形式 )。
在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

*通过innerHTML插入<script>元素并不会执行其中的脚本。

例子：

<div>
	<p>0</p>
	<p>1</p>
	<p>2</p>
</div>

var div = document.getElementsByTagName('div')[0];

console.log(div.firstElementChild.innerHTML); //输出：0
div.lastElementChild.innerHTML = "<b>hello</b>";
console.log(div.lastElementChild.innerHTML); //输出：<b>hello</b>

element.outerHTML：
和element.innerHTML属性唯一的区别是返回或替换调用它的元素及元素所有子节点对应的HTML标签。

元素偏移量属性

通过下列4个属性可以取得元素的偏移量：

element.offsetLeft：获取当前元素相对于某个父辈元素的左边距：如果父辈元素中有定位属性，那么就获取相对于这个父辈元素的左边距；如果父辈元素中没有定位属性，那么就返回相对于body的左边距。有定位属性的父辈元素保存在element.offsetParent中。

element.offsetTop：获取当前元素相对于某个父辈元素的上边距，与element.offsetLeft类似。

element.offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

element.offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

*td元素的element.offsetParent默认为table，而不是body。

要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。

代码如下：

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;}

    return actualLeft;
}

function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
        actualTop += current. offsetTop;
        current = current.offsetParent;
    }

    return actualTop;
}

测试上面的代码：

HTML代码

<div>
   <span></span>
</div>

CSS代码

*{
	margin:0; padding:0}
div{
	width:200px; 
	height:200px; 
	border:1px solid #777; 
	margin:50px 0 0 50px; 
	position:relative;}
span{
	display:block;
	width:50px;
	height:50px;
	background:#ccc;
	margin:50px 0 0 50px;}

JavaScript代码

var span = document.getElementsByTagName('span')[0];

console.log(span.offsetParent.nodeName); //输出：DIV
console.log(span.offsetLeft); //输出：50
console.log(span.offsetTop); //输出：50
console.log(getElementLeft(span)); //输出：100
console.log(getElementTop(span)); //输出：100

*所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

客户区大小属性

有关客户区大小的属性有两个：

element.clientWidth：该属性是元素内容区宽度加上左右内边距宽度。滚动条占用的空间不计算在内。

element.clientHeight：该属性是元素内容区高度加上上下内边距高度。

element.clientTop与element.clientLeft分别是上边框的大小和左边框的大小。

要确定浏览器视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight。

*与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的。

例子：

<div style="
width: 100px;
height: 150px;
background: #ddd;
padding: 10px;
margin: 10px;
border: 5px solid #ccc;
"></div>

var div = document.getElementsByTagName("div")[0];
console.log(div.clientWidth); //输出：120
console.log(div.clientHeight); //输出：170
console.log(div.clientTop); //输出：5
console.log(div.clientLeft); //输出：5

滚动大小属性

通过下列4个属性可以取得元素的滚动大小：

element.scrollHeight ：这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

element.scrollWidth：这个只读属性是一个元素内容宽度的度量，包括由于溢出导致的视图中不可见内容。

element.scrollLeft：返回或设置匹配元素的滚动条的水平位置。滚动条位于最左侧时，位置是 0。

element.scrollTop：返回或设置匹配元素的滚动条的垂直位置。滚动条位于最顶部时，位置是 0。

要确定浏览器中带有垂直滚动条的页面总高度，可以使用document.documentElement.scrollHeight或document.body.scrollHeight。

Element节点的常用方法

document.createElement()：这个方法接收一个参数，即要创建元素的标签名。

例子：

var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
document.body.appendChild(div);

浏览器截图：

图片描述

element.contains()：这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点或节点本身，该方法返回true。

例子：

console.log(document.documentElement.contains(document.body));
//输出：true
console.log(document.body.contains(document.body));
//输出：true

element.insertAdjacentHTML()：
将指定的文本解析为HTML，并将结果节点插入到DOM树中的指定位置。它接收两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列字符串之一：
‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。

例子：

<div>
    <p>0</p>
    <p>1</p>
    <p>2</p>
</div>

var div=document.getElementsByTagName('div')[0]
div.insertAdjacentHTML('beforeend', '<p>3</p>');

浏览器截图：

图片描述

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。