HTML DOM|方法和属性

最新推荐文章于 2024-07-29 09:13:18 发布

Alan_Lowe

最新推荐文章于 2024-07-29 09:13:18 发布

阅读量247

点赞数 2

分类专栏： # DOM 文章标签： dom html 方法属性

本文链接：https://blog.csdn.net/qq_45985728/article/details/119743006

版权

DOM 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文深入解析HTML DOM中常用的方法如getElementById、getElementsByTagName等，以及关键属性如innerHTML、nodeType。通过实例演示如何在JavaScript中操作DOM元素和理解其属性作用。

摘要由CSDN通过智能技术生成

HTML DOM|方法和属性

HTML DOM方法是可以在HTML元素上执行的操作。

HTML DOM属性是可以在HTML元素设置和修改的值。

假如人是一个对象，那么他的方法有吃，喝，拉，撒……他的属性有身高、年龄……

编程接口：

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是能执行的动作，属性是一个可以修改或者设定的值。

方法：

**getElementById() ** 返回带有指定ID的元素
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表
appendChild() 把新的子节点添加到指定节点
**removeChild() ** 删除子节点
replaceChild() 替换子节点
insertBefore() 在指定节点前插入新的子节点
createAttribute() 创建属性节点
createElement() 创建元素节点
createTextNode() 创建文本节点
getAttribute() 返回指定的属性值
setAttribute() 把指定属性设置或修改为指定的值

属性：

innerHTML属性：

获取元素内容的最简单的方法

nodeName属性规定节点的名称：

nodeName是只读的
元素节点的nodeName与标签名相同
属性节点的nodeName与属性名相同
文本节点的nodeName是#text
文档节点的nodeName是#document

nodeValue属性规定节点的值：

元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本本身
属性节点的nodeValue是值

nodeType属性返回节点的类型，是只读的：

元素返回1
属性返回2
文本返回3
注释返回8
文档返回9

一些方法和属性实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性和方法</title>
    <style>
        .style1{
            border: 3px solid red;
            width: 60px;
            height: 25px;
        }
    </style>
    
    <script>
        function Fun(){
            // 使用getElementById找到指定的元素，使用innerHTML获取元素的值
            document.getElementById("p2").innerHTML = document.getElementById("p1").innerHTML;
        }
        function checkType(){
            // nodeType获取节点的类型
            var x = document.getElementById("p1").nodeType;
            var y = "";
            switch (x){
                case 1:
                    y = "元素";break;
                case 2:
                    y = "属性";break;
                case 3:
                    y = "文本";break;
                case 8:
                    y = "注释";break;
                case 9:
                    y = "文档";break;
            }
            document.getElementById("p3").innerHTML = y;
        }
    </script>
</head>
<body>

<p id="p1">太阳</p>
<button onclick="Fun()">点击使用getElementById方法查看innerHTML属性</button>
<p id="p2" class="style1"></p>
<br>
<button onclick="checkType()">点击查看“太阳“的父节点的类型</button>
<p id="p3" class="style1"></p>

</body>
</html>