DOM节点的属性和方法

最新推荐文章于 2023-02-22 07:16:04 发布

zzzzzzz周绍辉

最新推荐文章于 2023-02-22 07:16:04 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_32758013/article/details/75092834

版权

HTML DOM Element 对象

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点（参见下一节）。

google	IE	firefox	safari	opera
true	true	true	true	true

属性和方法

1. accessKey

设置或返回元素的快捷键

快捷键规定激活元素或使元素获得焦点的快捷键。

注释：在不同的浏览器中访问快捷键的方式各有不同：

图片不见了

不过在大多数浏览器中，可以将快捷键设置为其他组合。

提示：如果超过一个元素拥有相同的快捷键，那么：

IE, Firefox: 激活下一个被按下快捷键的元素
Chrome, Safari:激活最后一个被按下快捷键的元素
Opera: 激活第一个被按下快捷键的元素

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

HTMLElementObject.accessKey=accessKey

<html>
<head>
    <script>
        function accesskey()
        {
    
            document.getElementById('w3s').accessKey="w"
        }
    </script>
</head>

<body onload="accesskey()">

<a id="w3s" href="http://www.w3school.com.cn/">W3School</a>

</body>
</html>

2. appendChild()

向节点添加最后一个子节点

提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

node.appendChild(node)

参数

必需
- node 您希望添加的节点对象。

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            var Dom_p = document.createElement('p');
            var text = document.createTextNode("1213"); //Document中的对象实例 createTextNode
            Dom_p.appendChild(text);
            div.appendChild(Dom_p);
        }
    </script>
</html>

3. attributes

返回指定节点的属性集合，即 NamedNodeMap

提示：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注释：在 Internet Explorer 8 以及更早的版本中，attributes 属性会返回元素所有可能属性的集合。

用法

node.attributes

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            var Dom_p = document.createElement('p');
            var attr = div.attributes;
            var text = "";
            for(let i = 0; i< attr.length;i++){
                text += attr[i].nodeValue + "   ";
            }
            Dom_p.innerText += text;
            div.appendChild(Dom_p);
        }
    </script>
</html>

4. childNodes

返回节点的子节点集合，以 NodeList 对象

提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

element.childNodes

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            console.log(document.body.childNodes);
        }
    </script>
</html>

5. className

设置或返回元素的 class 属性

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

HTMLElementObject.className=classname

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            div.className = "ddd"
        }
    </script>
</html>

6. clientHeight

返回元素的可见高度

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

HTMLElementObject.clientHeight

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            alert(div.clientHeight);
        }
    </script>
</html>

7. clientWidth

返回元素的可见高度

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

HTMLElementObject.clientWidth

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            alert(div.clientWidth);
        }
    </script>
</html>

8. cloneNode()

创建节点的拷贝，并返回该副本

cloneNode() 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代的属性，请把 deep 参数设置 true，否则设置为 false。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

node.cloneNode(deep)

参数

可选
- deep 默认是 false。
- - 设置为 true，如果您需要克隆节点及其属性，以及后代
- - 设置为 false，如果您只需要克隆节点及其后代
    返回值

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">点我吧</button>
</body>
    <script>
        function Event(){
    
            var cloneDiv = div.cloneNode();
            div.appendChild(cloneDiv)
        }
    </script>
</html>

9. compareDocumentPosition()

比较两个节点，并返回描述它们在文档中位置的整数

返回值

1：没有关系，两个节点不属于同一个文档。
2：第一节点（P1）位于第二个节点后（P2）。
4：第一节点（P1）定位在第二节点（P2）前。
8：第一节点（P1）位于第二节点内（P2）。
16：第二节点（P2）位于第一节点内（P1）。
32：没有关系，或是两个节点是同一元素的两个属性。

注释：返回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。

浏览器支持

google	IE	firefox	safari	opera
true	9.0	true	true	true

用法

node.compareDocumentPosition(node)

参数

必需
- node 规定于当前节点作比较的节点

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()" id="btn">点我吧</button>
</body>
    <script>
        function Event(){
    
            alert(div.compareDocumentPosition(btn));
        }
    </script>
</html>

10. contentEditable

设置或返回元素内容是否可编辑

提示：您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

HTMLElementObject.contentEditable

HTMLElementObject.contentEditable=true|false

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()" id="btn">点我吧</button>
</body>
    <script>
        function Event(){
    
            div.contentEditable = true;
        }
    </script>
</html>

11. dir

设置或返回元素的文本方向

提示：Element需要设置dir属性。

dir的属性值

auto 自动
rtl 右
ltl 左

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

HTMLElementObject.dir=text-direction

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir=""></div>
    <button onclick="Event()" id="btn">点我吧</button>
</body>
    <script>
        function Event(){
    
            alert(div.dir);
        }
    </script>
</html>

12. firstChild

返回指定节点的首个子节点，以 Node 对象

注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。

浏览器支持

google	IE	firefox	safari	opera
true	true	true	true	true

用法

node.firstChild

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
    </div>
    <button onclick="Event()" id="btn">点我吧</button>
</body>
    <script>
        function Event(){
    
            if(div.firstChild.nodeType == 3){
                console.log(div.childNodes[1]);
            }else{
                console.log(div.firstChild);
            }
        }
    </script>
</html>

13. getAttribute()

返回指定属性名的属性值

提示：如果您希望以 Attr

最低0.47元/天解锁文章

zzzzzzz周绍辉

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
DOM节点的属性和方法

HTML DOM Element 对象HTML DOM 节点在 HTML DOM （文档对象模型）中，每个部分都是节点：文档本身是文档节点所有 HTML 元素是元素节点所有 HTML 属性是属性节点HTML 元素内的文本是文本节点注释是注释节点Element 对象在 HTML DOM 中，Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释
复制链接

扫一扫