(七)JavaScript——DOM基础

最新推荐文章于 2021-12-23 22:07:03 发布

lyj_010

最新推荐文章于 2021-12-23 22:07:03 发布

阅读量184

点赞数

分类专栏： js学习文章标签： DOM javascript

本文链接：https://blog.csdn.net/lyj_010/article/details/102713375

版权

js学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、DOM介绍

1、DOM概念

　　文档对象模型 (Document Object Model，DOM) 是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。

　　它提供了对文档的结构化的表述，并定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

　　DOM 被分为 3 个不同的部分/级别：

核心 DOM：用于任何结构化文档的标准模型；
XML DOM：用于 XML 文档的标准模型；
HTML DOM：用于 HTML 文档的标准模型。

2、DOM节点

　　DOM的最小组成单位叫做节点（node），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成；

　　对于HTML文档，节点主要有以下六种类型：

Document节点
DocumentType节点
Element节点
Attribute节点
Text节点
DocumentFragment节点

3、DOM树

　　DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。当网页被加载时，浏览器会创建页面的文档对象模型，HTML文档被浏览器解析后就是一棵DOM树。

HTML DOM 模型被构造为对象的树：

示例代码：遍历DOM树，并打印出各节点名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <ul></ul>
    </div>
    <script>
        // 函数入口，传入遍历的根节点
        function forDom(root){
            forNode(root);

            var children = root.children;

            // 递归遍历子节点
            for(var i = 0; i < children.length; i++){
                forDom(children[i]);
            }
        }

        // 对节点进行的操作
        function forNode(node){
            console.log(node.nodeName);
        }

        // 从根节点遍历
        forDom(document.documentElement);
        
    </script>
</body>
</html>

输出结果：

4、DOM操作

　　操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

二、HTML DOM对象

1、Document

　　每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

接口文档：HTML DOM Document 对象

2、Element

　　页面中的所有标签都是元素，而元素可以看成是对象；

接口文档：HTML DOM Element 对象

3、Attribute

　　在 HTML DOM 中，Attr 对象表示 HTML 属性。HTML 属性始终属于 HTML 元素。

接口文档：HTML DOM Attribute 对象

4、Event

　　event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

　　事件句柄　(Event Handlers)，HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。

接口文档：HTML DOM Event 对象

三、DOM查找 HTML 元素

1、通过 id 找到 HTML 元素

　　在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

	var element = document.getElementById(id);

参量（string）：要定位的元素的ID。ID是区分大小写的字符串，在文档中是唯一的。只有一个元素可以具有任何给定的ID。
返回值（Element）：具有指定的 id 属性的文档元素的 Element 节点。如果没有找到这样的元素，则返回 null。

示例代码1——点击按钮弹框：

<body>
    <input type="button" value="btn" id="btn">
    <script>
        document.getElementById("btn").onclick = 
        	function(){alert("You click the button.");};
    </script>
</body>

示例代码2——点击按钮修改<p>标签中的文本内容：

<body>
    <div style="text-align: center;">
        <input type="button" value="btn" id="btn">
        <p id="tag_p"></p>
    </div>
    
    <script>
        document.getElementById("btn").onclick = function(){
            document.getElementById("tag_p").innerText = "This is tag p.";};
    </script>
</body>

示例代码3——点击按钮修改<a>标签的地址和文本文字：

<body>
    <div style="text-align: center;">
        <input type="button" value="btn" id="btn"><br/>
        <a id="tag_a" href="https://www.baidu.com/">BaiDu</a>
    </div>
    
    <script>
        document.getElementById("btn").onclick = function(){
            var tag_a = document.getElementById("tag_a");
            tag_a.innerText = "Google";
            tag_a.href = "https://www.google.com/";};
    </script>
</body>

示例代码4——点击按钮修改自身的属性：

<body>
    <input type="button" value="btn" id="btn">
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
        	// this指向的是调用它的对象,即当前执行代码的环境对象
            this.value = "new btn";
        };
    </script>
</body>

示例代码5——点击按钮修改单选框和复选框的选择项：

<body>
    <input type="button" value="choose man" id="btn1"/>
    <input type="radio" value="man" name="sex" id="sex_man"/>man
    <input type="radio" value="woman" name="sex"/>woman
    <input type="radio" value="unknown" name="sex"/>unknown
    <br/>

    <input type="button" value="choose basketball and running" id="btn2"/>
    <input type="checkbox" value="running" name="interest" id="i_run"/>running
    <input type="checkbox" value="basketball" name="interest" id="i_basketball"/>basketball
    <input type="checkbox" value="games" name="interest"/>games
    <script>
        function my$(id){
            return document.getElementById(id);
        }

        my$("btn1").onclick = function(){
        	// 这里设为 true 就可以，不必设为checked
            my$("sex_man").checked = true;
        }

        my$("btn2").onclick = function(){
            my$("i_run").checked = true;
            my$("i_basketball").checked = true;
        }

    </script>
</body>

2、通过标签名找到 HTML 元素

　　通过HTML元素的标签名寻找元素。

	var elements = element.getElementsByTagName(tagName);

返回值（NodeList）：是具有匹配标签名称的元素集合（按它们出现的顺序）。如果未找到任何元素，HTML集合则为空。
参量（string）：是要匹配的标签名称。特殊字符串"*"代表所有元素。为了与XHTML兼容，应使用小写字母。
element：是搜索开始的元素。仅包括元素的后代，不包括元素本身。

示例代码1——点击按钮设置多个<p>标签的内容：

<body>
    <div style="text-align: center;" id="div1">
        <input type="button" value="btn" id="btn">
        <p>div1-p1</p>
        <p>div1-p2</p>
    </div>
    <div style="text-align: center;">
        <p>div2-p1</p>
        <p>div2-p2</p>
    </div>
    
    <script>
        document.getElementById("btn").onclick = function(){
            // 设置搜索开始的元素为  div1
            var ps = document.getElementById("div1").getElementsByTagName("p");
            // 返回值为nodelist，伪数组
            for(var i = 0; i < ps.length; i++){
                ps[i].innerText = "new p";
            }};
    </script>
</body>

示例代码2——按钮点击的排他功能：

<body>
    <input type="button" value="btn">
    <input type="button" value="btn">
    <input type="button" value="btn">
    <script>
        var btns = document.getElementsByTagName("input");
        for(var i = 0; i < btns.length; i++){
            btns[i].onclick = function(){
                // 1、先恢复
                for(var j = 0; j < btns.length; j++){
                    btns[j].value = "btn";
                }
                // 2、再改变某个按钮，使用 this
                // 这里不能使用btns[i]，因为页面加载时是先注册事件，此时未执行代码
                // 点击按钮后才触发事件，此时执行代码
                // 而此时i的值已经为 btns.length 了，所以会报错
                this.value = "clicked btn";
            }
        }
    </script>
</body>

3、通过类样式名找到 HTML 元素

　　返回一个包含了所有指定类名的子元素的类数组对象，可以在document对象上调用，也可以在任意元素上调用。

	var elements = document.getElementsByClassName(names); // or:
	var elements = rootElement.getElementsByClassName(names);

返回值（NodeList）：elements 是一个实时集合，包含了找到的所有元素。
参量（string）：names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔。

示例代码1——通过类样式名称获取不同类型的标签元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cls{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="cls">I am a p.</p>
    <span class="cls">I am a span.</span><br/>
    <input type="button" id="btn" value="change color by className">
    <script>
        document.getElementById("btn").onclick = function(){
            var objs = document.getElementsByClassName("cls");
            for(i = 0; i < objs.length; i++){
                objs[i].style.backgroundColor = "yellow";
            }
        }
    </script>
</body>
</html>

4、通过标签的name属性找到 HTML 元素

　　根据给定的name 返回一个在 (X)HTML document的节点列表集合。

	var elements = document.getElementsByName(name)

返回值（NodeList）：是具有匹配标签名称的元素集合（按它们出现的顺序）。如果未找到任何元素，HTML集合则为空。
参量（string）：是要匹配的name属性。

示例代码1——通过name属性获取<input>元素：

<body>
    <input type="text" value="hello" name="text1">
    <input type="text" value="hello" name="text2">
    <script>
        document.getElementsByName("text2")[0].value = "world";
    </script>
</body>

5、通过选择器找到 HTML 元素

（1）querySelector()：

　　文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配（深度优先先序遍历）的第一个 html元素Element。如果找不到匹配项，则返回null。

	var element = document.querySelector(selectors);

返回值（Element）：表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素Element对象；
参量（string）：包含一个或多个要匹配的选择器的 DOM字符串DOMString。该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。

示例代码1——通过id选择器获取元素：

<body>
    <p id="p">This is a p.</p>
    <script>
        document.querySelector("#p").style.backgroundColor = "green";
    </script>
</body>

（2）querySelectorAll()：

　　返回与指定的选择器组匹配的文档中的元素列表。

	var elementList = parentNode.querySelectorAll(selectors);

返回值（NodeList）：一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList；
参量（string）：一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是，会抛出一个 SyntaxError 错误。

示例代码2——通过类样式获取元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cls{
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="cls">I am a p.</p>
    <span class="cls">I am a span.</span><br/>
    <input type="button" id="btn" value="change color by className">
    <script>
        document.getElementById("btn").onclick = function(){
            var objs = document.querySelectorAll(".cls");
            for(i = 0; i < objs.length; i++){
                objs[i].style.backgroundColor = "yellow";
            }
        }
    </script>
</body>
</html>

四、其他案例代码

示例代码1：
　　点击按钮修改style属性（修改style里的属性时，直接用style.xxx，并且将style属性名称中的 ‘-’ 去掉，除第一个单词外，其他首字母变大写）：

<body>
    <input type="button" value="change div color" id="btn"/>
    <div style="background-color: blue;width: 200px;height: 200px;" id="div">
    </div>
    <script>
        document.getElementById("btn").onclick = function(){
            document.getElementById("div").style.backgroundColor = "black";
        };
    </script>
</body>

示例代码2：
　　点击按钮设置标签class样式（在JavaScript里，class是个关键字，所以使用className代替）：

<body>
    <input type="button" value="hide" id="btn"/>
    <div style="background-color: blue;width: 200px;height: 200px;" id="div">
    </div>
    <script>
        document.getElementById("btn").onclick = function(){
            var divObj = document.getElementById("div");
            if(this.value == "hide"){
                this.value = "show";
                divObj.className = "cls";
            }else{
                this.value = "hide";
                divObj.className = "";
            }
        };
    </script>
</body>

示例代码3：
　　点击超链接时，阻止超链接默认跳转。

<body>
    <a href="https://www.baidu.com/" id="a">BaiDu</a>
    <script>
        document.getElementById("a").onclick = function(){
            alert("页面无法跳转");
            // 通过 return false 停止事件的继续执行
            return false;
        }
    </script>
</body>

示例代码4：
　　鼠标进入和离开事件，鼠标移动到列表，高亮显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li>Baidu</li>
        <li>Google</li>
        <li>360</li>
    </ul>
    <script>
        var liObj = document.getElementById("ul").getElementsByTagName("li");
        for(i = 0; i < liObj.length; i++){
            liObj[i].onmouseover = function(){
                this.style.backgroundColor = "yellow";
            }
            liObj[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>
</html>

示例代码5：
　　通过InnerText和textContent属性设置标签中间的文本内容，兼容不同浏览器。

<body>
    <p id="p"></p>
    <script>
    	// 如果当前浏览器没有这个属性，其值为 undefined
        function setInnerText(element,text){
            element.InnerText == undefined? element.textContent = text : element.InnerText = text;
        }

        function getInnerText(element){
            return element.InnerText == undefined? element.textContent : element.InnerText;
        }

        setInnerText(document.getElementById("p"), "This is a p.");
        console.log(getInnerText(document.getElementById("p")));
    </script>
</body>

示例代码6：
　　innerText和innerHTML的区别：innerHTML可以也设置标签中间的内容，而且可以在标签中设置标签；在获取标签中间内容时，如果有子标签，innerText获取的是子标签的内容，而innerHTML可以获取子标签本身及内容。

<body>
    <div id="myDiv"></div>
    <script>
        // 设置的内容是 This is a p.
        document.getElementById("myDiv").innerHTML = "<p>This is a p.</p>";
        // 获取的内容是 <p>This is a p.</p>
        console.log(document.getElementById("myDiv").innerHTML);
    </script>
</body>