这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

Element对象

节点与元素的比较

Element对象是什么？

如下代码测试了Element对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象是什么</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
    //1、DOM并没有提供element对象
    // console.log(element); 报错
    // 2、DOM不允许创建Element对象
    /*var element = new Element();
    console.log(element); 报错*/

    /*
        返回值变量相同
    1、HTMLButtonElement对象
    2、Node对象
    3、Element对象
    */
    var btn = document.getElementById('btn');
    console.log(btn instanceof HTMLButtonElement);//true
    console.log(btn instanceof Node);//true
    console.log(btn instanceof Element);//true

    // Element继承于Node
    console.log(Element.prototype instanceof Node);//true
    // HTMLButtonElement继承于HTMLElement
    console.log(HTMLButtonElement.prototype instanceof HTMLElement);//true
    // HTMLElement继承于Element
    console.log(HTMLElement.prototype instanceof HTMLElement);//true  
</script>
</body>
</html>

Node、HTMLElement和HTMLButtonElement三者之间形成了继承链关系。

定位页面元素的方法

Element对象提供了属性和方法实现定位页面元素功能。

该对象与Docurment对象提供的属性和方法实现定位页面元素功能的区别在于，Docurment对象定位的是HTML页面中所有指定元素，而Element对象定位的是指定元素内所有指定元素。

目前Element对象提供实现定位页面元素的方法具有如下几种:

getElementsByLagName()方法:通过页面元素的元素名定位元素。
getElementsByClassName()方法:通过页面元素的class属性值定位元素。
querySelecto()方法:通过CSS选择器定位第一个匹配的元素。
querySelectorAll()方法:通过CSS选择器定位所有匹配的元素。

如下代码展示了定位页面元素的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位页面元素</title>
</head>
<body>
<ul id="city">
    <li>邯郸</li>
    <li>保定</li>
    <li>邢台</li>
</ul>
<ul id="game">
    <li>和平精英</li>
    <li>王者荣耀</li>
    <li>魔兽世界</li>
</ul>
<script>
    // document代表当前HTML页面
    var lis1 = document.getElementsByTagName('li');
    console.log(lis1);//HTMLCollection(6)
    // element代表指定标签
    var city = document.getElementById('city');
    var list2 = city.getElementsByTagName("li");
    console.log(list2);//HTMLCollection(3)
</script>
</body>
</html>

获取子元素

通过HTML页面中指定元素查找其子元素，我们可以通过以下Element对象的属性实现:

属性名	描述
children	获取指定节点的所有子元素
childElementCount	获取指定元素的所有子元素的个数
firstElementChild	获取指定节点的第一个子元素
lastElementChild	获取指定节点的最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取子元素</title>
</head>
<body>
<ul id="city">
    <li>邯郸</li>
    <li>保定</li>
    <li>邢台</li>
</ul>
<script>
    var city = document.getElementById('city');
    // 获取所有子节点 - 不存在浏览器兼容问题
    var children = city.children;
    console.log(children);

    // 以下三个属性都有浏览器兼容问题
    var firstChild =city.firstElementChild;
    console.log(firstChild);//<li>邯郸</li>
    var lastChild =city.lastElementChild;
    console.log(lastChild);//<li>邢台</li>
    var childCount =city.childElementCount;
    console.log(childCount);//3

</script>
</body>
</html>

解决上述代码中的浏览器问题代码如下：

var myTools = {
    firstElementChild : function (element) {
        if (element.firstElementChild===undefined){
            return element.children[0];
        } else{
            return element.firstElementChild;
        }
    },
    lastElementChild : function (element) {
        if(element.lastElementChild===undefined){
            var children = element.children;
            return children[children.length-1];
        }else {
            return element.lastElementChild;
        }

    },
    childElementCount : function (element) {
        if (element.childElementCount===undefined){
            var children = element.children;
            return children.length;
        }else{
            return element.childElementCount;
        }
    }
}

获取相邻兄弟元素

获取相邻后面兄弟元素 Element对象提供了nextElementSibling属性用于获取指定元素的后面相邻兄弟元素:

var nextElem = node.nextElementSibling;

nextElementSibling属性返回nextElem表示当前元素的后一个兄弟元素。

注意：如果当前元素无后一个兄弟元素，啧nextElementSibling属性返回null。

如下代码展示了获取相邻兄弟元素的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取相邻兄弟元素</title>
</head>
<body>
<ul id="city">
    <li>邯郸</li>
    <li id="bd">保定</li>
    <li>邢台</li>
</ul>
<script>
    var bdElement = document.getElementById('bd');

    console.log(bdElement.previousElementSibling);//获取前一个兄弟元素
    console.log(bdElement.nextElementSibling);//获取后一个兄弟元素
	
    var parent = document.getElementById('city');
    var children = parent.children;

    console.log(children)//HTMLCollection(3)

    //解决方案
    var index = 0;
    for (var i=0;i<children.length;i++){
        if (children[i] === bdElement){
            index = i;
        }
    }
    console.log(index);//1
</script>
</body>
</html>

查找相邻兄弟元素的解决方案流程图如下所示：

属性操作

如下代码展示了属性操作的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
</head>
<body>
<button id="btn" class="cla"></button>
<script>
    var btn = document.getElementById('btn');
    // 获取属性
    console.log(btn.getAttribute('class'));
    // 设置属性
    btn.setAttribute('name','button');
    // 删除属性
    btn.removeAttribute('id');
    // 判断是否具有某个属性
    console.log(btn.hasAttribute('name'));//true
    // 判断是否具有属性 - 具有浏览器兼容问题
    console.log(btn.hasAttributes());//true
</script>

</body>
</html>

inerHTML属性

如下代码举例了为

元素添加新的

元素的操作方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inerHTML属性</title>
</head>
<body>
<ul id="city">
    <li>邯郸</li>
    <li id="bd">保定</li>
    <li>邢台</li>
</ul>
<script>
    // 为<ul>元素添加新的<li>元素

    // 节点方式操作
    /*var newLi = document.createElement('li');
    var textNode = document.createTextNode('石家庄');
    newLi.appendChild(textNode);

    var city = document.getElementById('city');
    city.appendChild(newLi);*/

    // innerHTML方式操作
    var city =document.getElementById('city');

    var html = city.innerHTML;//获取指定元素的HTML代码
    console.log(html);
    html += '<li>石家庄</li>';
    city.innerHTML = html;

    // innerHTML属性的问题 —— 安全问题（innerHTML属性的值不能由用户编写）
</script>
</body>
</html>

效果图如下：