javascript Element类型

最新推荐文章于 2023-11-24 20:37:14 发布

mannuandeyangguang

最新推荐文章于 2023-11-24 20:37:14 发布

阅读量893

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.youkuaiyun.com/wujunlei1595848/article/details/90670412

前端开发专栏收录该内容

73 篇文章

订阅专栏

本文围绕JavaScript操作HTML元素展开，介绍了Element节点相关属性，如nodeName、tagName等。阐述了HTML元素类型继承关系，还讲解了取得特性、设置特性、attributes属性的操作方法，以及创建元素、处理元素子节点和获取元素尺寸与位置等内容，并给出了最佳实践建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element节点是Element类型的实例；

Element节点的nodeName与tagName属性元素的标签名的大写;nodeValue为null;

<!DOCTYPE html>
<html>
    <body>
        <div id="123">123</div>
    </body>
    <script>
        var _div = document.getElementById("123");
        console.log(_div.nodeName);
        console.log(_div.tagName);
        console.log(_div.nodeValue);
    </script>
</html>

最佳实践：在比较标签名与字符串时，最好先将标签名转为为全小写。

HTML元素

所有HTML元素都由HTMLElement类型表示，HTMLElement类型继承自Element类型并添加了一些属性和方法；

所有HTML元素都是由HTMLElement或者其子类型表示的，每个HTML元素都由与之关联的类型，如：HTMLAnchorElement, HTMLBodyElement, HTMLDivElement..., 这些类型都继承HTMLElement类型的属性和方法，也有着自己的扩展

大部分HTML标签的原生特性作为Element节点对象的属性都可以直接通过"."或"[]"操作符读写，但无法读写自定义的特性（见下面的取得特性一节）

<!DOCTYPE html>
<html>
    <body>
        <div id="123">123</div>
    </body>
    <script>
        var _div = document.getElementById("123");
        console.log(_div.id);
        console.log(_div.className);
        console.log(_div.name);
        console.log(_div["id"]);
        console.log(_div["className"]);
        console.log(_div["name"]);
    </script>
</html>

class为ES的保留字，使用“.” 或"[]"访问元素类名需要使用className。

取得特性

getAttribute(), setAttribute(), removeAttribute()三个特性操作的方法：

传递给getAttribute()的特性名字符串与实际的特性名相同，比如：要获取class的特性值，应该传入'class',而不是'className';
通过getAttribute()方法可以取得自定义特性；
最佳实践：根据HTML5的规范推荐，自定义特性应该加上data-前缀以便验证；

getAttribute()方法与节点的访问方法".style"返回值的类型不同，前者返回一个字符串，后者返回CSSStypleDeclaration对象；

<!DOCTYPE html>
<html>
    <body>
        <div id="123" style="height: 20px;">123</div>
    </body>
    <script>
        var _div = document.getElementById("123");
        console.log(_div.getAttribute("style"));  // 输出：height: 20px;
        console.log(_div.style);  // 输出：CSSStyleDeclaration {0: "height", alignContent: "", …}
    </script>
</html>

同理，访问节点的"onclick"也分别返回function和字符串

最佳实践：只在获取标签的自定义特性值的情况下才使用getAttribute()方法，其余情况直接访问属性。

设置特性

setAttribute()接收两个字符串参数：name 和value；
setAttribute()方法可以操作自定义特性；
setAttribute()设置的特性名会自动转换为小写；
最佳实践：只有在设置自定义标签的时候才使用setAttribute()方法，其余情况直接操作属性；
removeAttribute()用于彻底删除元素的特性和值，包括自定义特性；

attributes属性

attributes属性是Element类型独有的；
attributes属性是一个NamedNodeMap对象，类似NodeList，是由特性节点组成对象；
NamedNodeMap对象中的每一项又是一个单独的特性节点，有nodeName，nodeValue等属性；

NamedNodeMap对象拥有的方法

<!DOCTYPE html>
<html>
    <body>
        <div id="123" style="height: 20px;">123</div>
    </body>
    <script>
        var _div = document.getElementById("123");

        // item()
        console.log(_div.attributes.item(1));  // 输出：style="height: 20px;"

        // getNamedItem()
        console.log(_div.attributes.getNamedItem("id"));  // 输出：id="123"
        console.log(_div.attributes.getNamedItem("id").nodeValue);  // 输出：123

        // removeNamedItem()
        console.log(_div.attributes.removeNamedItem("style"));  // 输出：style="height: 20px;"

        // setNamedItem()
        var newAttr = document.createAttribute("newAttr");
        newAttr.nodeValue = "456";
        _div.attributes.setNamedItem(newAttr);
    </script>
</html>

使用attributes对象来操作元素节点的特性与直接使用getAttribute(), setAttribute(), removeAttribute()效果一致，attributes的方法可以找到别的简单的替代者；
针对attributes对象中的特性，不同浏览器返回的顺序不同；IE7会将没有指定的特性一并返回，需要使用NamedNodeMap中节点的specified属性检测是否为已定义特性
```
console.log(_div.attributes[1].specified);  // 输出：true或false
```

最佳实践：只使用attributes属性对象来遍历元素的特性：

<!DOCTYPE html>
<html>
    <body>
        <div id="123" style="height: 20px;">123</div>
    </body>
    <script>
        function outputAttributes(element){
            var attrs = new Array(),
                attrName,
                attrValue,
                i,
                len;

            for(i = 0, len=element.attributes.length; i<len; i++){
                attrName = element.attributes[i].nodeName;
                attrValue = element.attributes[i].nodeValue;
                if(element.attributes[i].specified){
                    attrs.push(attrName + '=\"' + attrValue + '\"');
                }
            }

            return attrs.join(" ");
        }
        var _div = document.getElementById("123");
        console.log(outputAttributes(_div));
    </script>
</html>

创建元素

document.createElement()传入参数为标签名（小写）：

<!DOCTYPE html>
<html>
    <body>
        <div id="123" style="height: 20px;">123</div>
    </body>
    <script>
        var _div = document.createElement("div");
        _div.className = 'div';
        _div.innerHTML = 'Hi!';
        document.body.appendChild(_div);
    </script>
</html>

可以创建自定义的非标准标签，例如：
```
document.createElement("abc");
```

在IE8及以下可以传入整个元素标签，包括属性、content等，其他浏览器不支持；兼容性写法：

<!DOCTYPE html>
<html>
    <body>
        <div id="123" style="height: 20px;">123</div>
    </body>
    <script>
        if(document.documentMode && document.documentMode <= 8){
            var div = document.createElement('<div class=\"demo\">Content</div>');
        }else{
            var div = document.createElement('div');
            div.calssName = 'div';
            div.innerHTML = 'Content';
        }
    </script>
</html>

元素的子节点

不同的浏览器对待元素间的空白符的解析不同。低版本IE会忽略元素之间的无用的空白符，其他浏览器会将空白符视作一个文本节点；

需要对元素的childNodes进行操作时，通常先检测一下nodeType属性：

<!DOCTYPE html>
<html>
    <body>
        <div id="123" style="height: 20px;">123</div>
    </body>
    <script>
        var element = document.getElementById("123");
        for(var i=0; i<element.childNodes.length; i++){
            if(element.childNodes[i].nodeType == 1){
                // do something
            }
        }
    </script>
</html>