JavaScript系列教程(十二)：DOM(1)

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30345577

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/codingplayer/p/7274481.html

本文详细介绍了DOM（文档对象模型）的概念及其在HTML中的应用，包括如何使用JavaScript获取、修改和操作DOM节点，例如元素节点、属性节点和文本节点等。

一、DOM的概念

DOM（Document Object Model）文档对象模型
DOM是W3C(万维网联盟)定义的关于访问HTML和XML文档的标准

W3CDOM标准分为3部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

【说明】HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准，即操作HTML的元素

二、DOM的节点分类

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

Image%20%5B1%5D.png

Image%20%5B2%5D.png

节点树中的节点彼此拥有层级关系。

父（parent）节点：父节点拥有任意数量的子节点
子（child）节点：子节点拥有一个父节点
兄弟（sibling）节点：同级的子节点被称为同胞（兄弟或姐妹）。同胞是拥有相同父节点的节点
根（root）节点：在节点树中，顶端节点被称为根（root）根节点没有父节点

三、DOM中获取节点的方法

1、获取元素节点

getElementById()
根据元素id获取元素节点
getElementsByTagName()
根据标签名称获取元素节点注意：返回值是集合
getElementsByClassName()
获取相同class属性的节点列表（ IE8及以下不支持）
getElementsByName()
获取相同名称的节点列表
注意：不是所有标签都有name属性（form 表单元素有）某些低版本浏览器会有兼容性问题
querySelector()
找到符合该选择器的第一个元素
querySelectorAll()
找到符合该选择器的所有元素

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="first">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <input type="checkbox" name="sex" />男
        <input type="checkbox" name="sex" />女
        <p>第一个p
            <span>第一个span</span>
        </p>
        <p>第二个p
            <span>第二个span</span>
        </p>
        <script type="text/javascript">
            
            //1.通过id获取元素
            var aDiv1 = document.getElementById("first");
            console.log(aDiv1);
            //2.通过标签名获取元素
            var aDiv2 = document.getElementsByTagName("div");
            console.log(aDiv2);
            //3.通过class来获取 在IE8以下的浏览器无法获取
            var aDiv3 = document.getElementsByClassName("box");
            console.log(aDiv3);
            //4.通过name来获取元素节点
            var aCheckBox = document.getElementsByName("sex");
            console.log(aCheckBox);
            //5.找到符合该选择器的第一个元素
            var arr = document.querySelector('p span');
            console.log(arr);
            //5.找到符合该选择器的所有元素
            arr = document.querySelectorAll('p span');
            console.log(arr);
        </script>
    </body>

</html>

2、获取和修改属性节点的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <div class="div1" id="first">1</div>
        <input type="text" value="123" name="btn" />
        <a href="index1.html" title="链接">超链接</a>
        
        <script>
            
            var div1 = document.getElementById('first');
            //获取属性
            console.log(div1.className);//class属性
            console.log(div1.id);//id属性
            console.log(div1.tagName);//元素节点的标签名
            
            var btn = document.querySelector('input');
            console.log(btn.value);//获取value属性
            console.log(btn.name);//name属性
            
            var a = document.querySelector('a');
            console.log(a.title);//title属性
            console.log(a.href);//href属性
            
            //修改/设置标签属性
            div1.className = 'div2';
            btn.value = '这是个值';
            
        </script>
    </body>
</html>

标签自定义属性操作

getAttribute() 获取节点自定义的属性的值
setAttribute() 设置自定义属性的值
removeAttribute() 移除自定义属性某些低版本浏览器不支持

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>

    <body>

        <div id="box" myattr="自定义的属性"></div>

        <script type="text/javascript">
            var box = document.getElementById('box');
            //1.获取自定义属性的属性值
            console.log(box.getAttribute("myattr")); //自定义的属性

            //2.设置自定义属性的属性值
            box.setAttribute("myattr", "hello");
            console.log(box.getAttribute("myattr")); //hello

            //3.删除自定义的属性节点
            box.removeAttribute("myattr");
            console.log(box.getAttribute("myattr")); //null
        </script>
    </body>

</html>

3、获取文本节点

innerHTML
从对象的开始标签到结束标签的全部内容,不包括Html标签。
outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。
innerText
从对象的开始标签到结束标签的全部的文本内容

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="box">
            <span>我是span</span>
            <div>我是div</div>
        </div>
        <script type="text/javascript">
            var box = document.getElementById('box');
            //1.开始标签到结束标签之间的内容
            console.log(box.innerHTML);
            //2.innerHTML的内容在加上开始标签与结束标签
            console.log(box.outerHTML);
            //3.开始标签与结束标签之间的文本信息
            console.log(box.innerText);

            //4.设置标签文本内容
            box.innerText = '内容被修改了';
            //5.设置标签文本内容
            box.innerHTML = '内容又被修改了';
            //6.添加新的标签/内容中可以有标签
            box.innerHTML = '<h1>内容怎么老被修改</h1>';
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/codingplayer/p/7274481.html