DOM基础

鸣鲷有柒

已于 2022-11-03 14:55:42 修改

阅读量204

点赞数

文章标签： html 前端 javascript

于 2022-11-03 14:04:47 首次发布

本文链接：https://blog.csdn.net/m0_74343097/article/details/127660283

版权

一、javascript的组成

1. ECMAScript：JS的语法标准----ECMAScript5.0,（简称ES5）、ECMAScript2015（ES6）、ECMAScript2017。

2. BOM：浏览器对象模型。

3. DOM：文档对象模型。

二、什么是DOM?

1. Document Object Model：文档对象模型

2. DOM的核心：document对象

3. DOM的作用：可以访问和操作XML和HTML文档中标签、标签的属性、节点的属性和方法。HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

4. 在DOM中将整个html文档看做是一个倒立的树（树状结构）：一个html页面就是一个DOM对象，是一棵DOM HTML树

（1）DOM HTML树的根节点：html

（2）元素(Element)：html文档中的标签

（3）节点(Node)：html文档中的内容

5. DOM树中的节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上它们的具体类型是不同的。

文档节点：整个HTML文档
标签节点：HTML文档中的所有标签
属性节点：标签的属性—内置属性（不管用不用都存在）、自定义属性（本身没有后期自己加上的）。
文本节点：HTML标签中的文本内容，标签中的文本、换行、空格等
注释节点：<!-- 注释内容 --!>。

6. 基本概念

根节点：根节点是html，有且只能有一个
子节点：某个节点的下一级节点
父节点：某个节点的上一级节点
兄弟节点：拥有相同父节点的节点

let div = document.getElementById('dt')
console.log(div)
console.log(div.__proto__)  //__proto__：表示元素的原型

7. 节点属性

8. 文档节点
文档节点（Document）代表的是整个HTML文档，网页中的所有节点都是它的子节点。

document对象作为window对象的属性存在的，我们不用获取可以直接使用。

通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

9. 元素节点
HTML中的各种标签都是元素节点（Element），这也是我们最常用的一个节点。

浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

例如：document.getElementById()，根据id属性值获取一个元素节点对象。

10. 属性节点
属性节点（Attribute）表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。可以通过元素节点来获取指定的属性节点。

例如：元素节点.getAttributeNode("属性名")，根据元素节点的属性名获取一个属性节点对象。

注意：我们一般不使用属性节点。

11. 文本节点
文本节点（Text）表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容。文本节点一般是作为元素节点的子节点存在的。获取文本节点时，一般先要获取元素节点，在通过元素节点获取文本节点。

例如：元素节点.firstChild;，获取元素节点的第一个子节点，一般为文本节点。

三、通过document对象来查找html页面中的元素

1. getElementById(“id属性值”)：通过标签的id属性获取标签

2. getElementsByName(“name属性值”)：通过标签的name属性获取标签，返回值的类型是NodeList

3. getElementsByTagName(“标签名”)：通过标签名获取标签，返回值的类型是HTMLCollection

4. getElementsByClassName(“class属性值”)：通过标签的class属性获取标签，返回值的类型是HTMLCollection

5. querySelector(‘#id属性值’)：返回第一个指定id属性值的标签

querySelector(‘.class属性值’)：返回第一个指定class属性值的标签

querySelector(‘标签名’)：返回第一个指定标签名的标签

6. querySelectorAll(‘.class属性值’)：返回所有指定class属性值的标签。返回值的类型是NodeList

querySelectorAll(‘标签名’)：返回所有指定标签名的标签。返回值的类型是NodeList

<body>
    <button id="btn">我是按钮</button>
    <button>我是按钮</button>
    <button class="btn2">我是按钮</button>
    <button class="btn3">我是按钮</button>

    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
    </ul>

    <script>
        var btn = document.getElementById("btn");
        console.log(btn);

        var btn1 = document.getElementsByTagName("button");
        console.log(btn1);

        var btn2 = document.getElementsByClassName("btn2");
        console.log(btn2);

        var btn3 = document.querySelector(".btn3");
        console.log(btn3);

        var list = document.querySelectorAll(".list li");
        console.log(list);
    </script>
</body>

四、获取 HTML 的值

元素节点.innerText 获取 HTML 元素的 inner Text。
元素节点.innerHTML 获取 HTML 元素的 inner HTML。
元素节点.属性获取 HTML 元素的属性值。
元素节点.getAttribute(attribute) 获取 HTML 元素的属性值。
元素节点.style.样式获取 HTML 元素的行内样式值。

  <body>
    <button id="btn">我是按钮</button>

    <div id="box">
        <h1>我是Box中的大标题</h1>
    </div>

    <a id="a" href="https://www.baidu.com">打开百度，你就知道！</a>
   
    <div style="width: 100px;height: 100px;background: red;" id="box2"></div>

    <script>
        var btn = document.getElementById("btn");
        console.log(btn.innerText);//创建一个按钮，然后获取按钮的文本内容

        var box = document.getElementById("box");
        console.log(box.innerHTML);//创建一个div，然后在div中插入一个h1标题，获取div中的html代码

        var a = document.getElementById("a");
        console.log(a.href);
        console.log(a.getAttribute("href"));//创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性

        var box = document.getElementById("box2");
        console.log(box.style.width);//创建一个正方形div，默认颜色为红色，使用JavaScript代码获取div的宽度
    </script>
</body>

五、document对象的属性

1. document.body：返回文档的body元素

2. document.documentElement：返回文档的html元素

3. document.forms：返回文档的form(表单)对象

<body>
    <form action="#" method="get">
        用户名：<input type="text" name="userName"><br/>
        密码：<input type="password" name="pwd" id=""><br/>
        <input type="reset">
        <input type="submit">
    </form>
    <script>
        console.log(document.body)
        console.log(document.documentElement)
        console.log(document.forms)//返回的是集合，长度为1
        console.log(document.forms[0].tagName)//FORM
        console.log(document.forms[0].method)//get
    </script>
</body>

六、Element对象的属性和方法

在JavaScript代码中使用html的标签（Element）属性和方法

1. children属性：用来获取某个元素的子元素

强调：HTMLCollection和NodeList的区别

（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

（2）NodeList：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

（3）HTMLCollection对象用于元素操作

（4）NodeList对象用于节点操作

七、元素的属性和方法

1. 属性：

（1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

（2）innerText：设置或返回元素中去除所有标签的内容（不能解析标签—-不识别标签）

（3）textContent：设置或者返回指定节点的文本内容（不识别换行）

2. 方法：

（1）document.write(“html内容”)：在文档中写入指定的内容

（2）document.writeln(“html内容”)：向文档写入指定的内容后并换行，比document.write多一个空格

八、标签的属性

1. attributes：返回标签的所有属性集合

date-设置自定义属性

2. setAttribute(name, value)：设置标签的属性值。参数name表示属性名，参数value表示属性值

name = "value"

<div id="d1" class="dt" name="mydiv" title="woniu">
    北京大学
</div>
<button id="btn">更改文字</button>
<script>
    let btn_font = document.getElementById('btn')
    btn_font.addEventListener('click',function(){
        document.getElementById('d1').setAttribute('class','dd')
    })
</script>

练习对input中输入的用户名进行验证。当用户名合法时在input后显示“用户名正确”，否则显示”用户名错误“

<style>
    .ok{
        color:green;
    }
    .fail{
        color: red;
    }
</style>
<body>
    <div class="login">
        <label>
            用户名：<input type="text" id="username"> <span id="msg"></span>
        </label>
        <br><br>
        <button id="btn_check">验证</button>
    </div>
    <script>
        let check = document.getElementById('btn_check')
        check.addEventListener('click',function(){
            //1.获取input的value
            let uname = document.getElementById('username').value
            //2.对用户名进行判断
            if(uname === 'abc'){
                document.getElementById('msg').innerText = '用户名正确'
                document.getElementById('msg').setAttribute('class','ok')
            }else{
                document.getElementById('msg').innerText = '用户名错误'
                document.getElementById('msg').setAttribute('class','fail')
            }
        })
    </script>
</body>

九、元素的样式

1. 用法：

（1）元素对象名.style.样式属性名 = 属性值

注意：“样式属性名”在使用时需要将单词之间的’-‘删除，将第二个单词的首字母大写

<body>
    <div id="dd"></div>
    <script>
        let div = document.getElementById('dd')
        div.style.width='200px'
        div.style.height='200px'
        div.style.backgroundColor='skyblue'
    </script>
</body>

（2）HTML5对象样式的操作：

1）一个元素的class属性可以有多个值：作用是在保留原有样式的基础上添加新的样式

2）如何在js程序运行过程中动态的添加class属性值：

classList属性：是元素的class属性的列表

2. classList属性提供的方法和属性

（1）属性：length —— 某个标签的class属性值的个数（即多少个类名）

（2）方法：

1）add(‘字符串’)：给元素添加类名。一次只能添加一个

2）remove(‘字符串’)：将元素的类名删除。一次只能删除一个

3）toggle(‘字符串’)：若类名存在则删除，不存在则添加

4）item(index)：根据index，来获取元素的类名

5）contains（‘类名’）：判断元素是否含有给定的类名，若有返回true，没有返回false

<style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
    .box2{
        margin: 100px auto;
    }
</style>
<body>
    <div class="box1 box2 box3 box4" id="box"></div>
    <button id="center">居中</button>
    <button id="recover">恢复</button>
    <button id="toggle">交替</button>
    <button id="item">索引</button>
    <button id="contain">是否包含</button>
    <script>
        document.querySelector('#center').addEventListener('click',function(){
            document.querySelector('#box').classList.add('box2')
        })
        document.querySelector('#recover').addEventListener('click',function(){
            document.querySelector('#box').classList.remove('box2')
        })
        document.querySelector('#toggle').addEventListener('click',function(){
            document.querySelector('#box').classList.toggle('box2')
        })
        document.querySelector('#item').addEventListener('click',function(){
            let name = document.querySelector('#box').classList.item(4)
            console.log(name)
        })
        document.querySelector('#contain').addEventListener('click',function(){
            let flag = document.querySelector('#box').classList.contains('box1')
            console.log(flag)
        })
    </script>
</body>

十、节点操作

采用操作节点的方式来操作页面中的元素

1. 获取节点时使用的属性

1）firstChild：获取当前节点的首个子节点。

注意：换行符、空格等也是节点

2）nextSibiling：返回同一层级中指定节点之后紧跟的节点

    <div id="dt">
        <p>西安市</p>
        <p>咸阳市</p>
        <p>宝鸡市</p>
        <p>渭南市</p>
    </div>
    <script>
        let div = document.querySelector('#dt')
        console.log('div的第一个子节点：',div.firstChild.nextSibling)
    </script>

3）lastChild：访问当前节点的最后一个子节点

4）previousSibling：返回同一层级中指定节点的前一个节点

 <div id="dt">
        <p>西安市</p>
        <p>咸阳市</p>
        <p>宝鸡市</p>
        <p>渭南市</p>
    </div>
    <script>
        let div = document.querySelector('#dt')
        console.log('div的第一个子节点：',div.firstChild.nextSibling)
        console.log('div的最后一个子节点：',div.lastChild.previousSibling)
    </script>

5）nodeName：节点的名称

6）nodeValue：节点的值

7）nodeType：节点类型

返回值是1：表示当前节点的类型是标签（元素）

返回值是2：表示属性节点

返回值是3：表示文本节点

8）parentNode：访问当前元素节点的父节点

9）childNodes：当前节点的所有子节点

强调：childNodes属性和children属性的区别

（1）相同点：都可以获取子元素

（2）不同点：

childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList

children返回的元素节点（即标签），返回值类型是HTMLCollection

<body>
    <div id="dt">a
        <input type="text" value="2">
        <p>咸阳</p>
        <p>西安</p>
        <p>宝鸡</p>
    </div>
    <script>
        let div = document.getElementById('dt')
        // 
        // console.log('div的第二个子节点：',div.firstChild)
        // console.log('div的第一个子节点：',div.firstChild.nextSibling) 
        // console.log('div的最后一个子节点：',div.lastChild) 
        // console.log('div的第一个子节点：',div.lastChild.previousSibling) 
        // console.log('div的第一个子节点：',div.firstChild.nextSibling.nodeName) 
        // console.log('div的第一个子节点：',div.firstChild.nextSibling.nodeValue)
 
        // nodeType:节点类型。1：表示当前节点的类型是标签；2：表示属性节点；3：表示的文本节点 
        console.log(div.firstChild.nextSibling.nodeType)//1：表示当前节点的类型是标签；
        console.log(div.getAttributeNode('id').nodeType)//2：表示属性节点
        console.log(div.firstChild.nodeType)//3：表示的文本节点 
 
        console.log('div的所有子节点（childNodes）',div.childNodes)//NodeList(9) [text, input, text, p, text, p, text, p, text]
        console.log('div的所有子节点（children）',div.children)//HTMLCollection(4) [input, p, p, p]
        console.log('div的id属性值：',div.getAttribute('id'))//获取id属性值
        console.log('div的id属性值：',div.getAttributeNode('id').nodeType)//获取id属性的类型
    </script>
</body>

<body>
    <h2 id="ht">黄昏</h2>
    <input type="text" name="txt" id="node_value">
    <button id="insert">插入元素</button>
    <script>
        // 1.获取按钮
        let btn_insert = document.querySelector('#insert')
        // 2.注册事件监听
        btn_insert.addEventListener('click',function(){
            // 2.1 获取input值
            let input = document.querySelector('#node_value').value
            // 2.2 给input创建文本节点input_txt
            let input_txt = document.createTextNode(input)
            // 2.3 创建元素（标签）h2节点
            let h2_node = document.createElement('h2')
            // 2.4 将文本添加到h2中
            h2_node.appendChild(input_txt)
            // 3.获取插入位置上的标签 <h2 id="ht">黄昏</h2>
            let h2_position = document.querySelector('#ht')
            if (h2_position.parentNode) {
                h2_position.parentNode.insertBefore(h2_node,h2_position)
            }
        })
    </script>
</body>

2.节点操作

1. 复制节点：

cloneNode（deep）

参数deep是boolean型。true/false

true：表示深度复制（将节点及其子节点都进行复制）—- 深拷贝

false：表示浅复制（只复制节点而不复制子节点）—- 浅拷贝

<select id="sex">
        <option value="%">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <hr>
    <div id="div_clone"></div>
    <button id="clone_false" onclick="copyNode(false)">浅拷贝</button>
    <button id="clone_true" onclick="copyNode(true)">深拷贝</button>
    <script>
        function copyNode(bool){
            //1.获取select标签
            let sel = document.getElementById('sex')
            //2.复制select
            let newNode = sel.cloneNode(bool)
            //3.获取div
            let mydiv = document.getElementById('div_clone')
            let br = document.createElement('br')
            mydiv.appendChild(newNode)
            mydiv.appendChild(br)
        }
    </script>

2. 删除节点：removeChild(node)

（1）参数node为要删除的节点

（2）前提：被删除的节点必须为空（没有子节点）

<body>
    <select name="" id="sex">
        <option value="%">请选择</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select>
    <hr>
    <div id="div_clone"></div>
    <button id="clone_false" onclick="copyNode(false)">浅拷贝</button>
    <button id="clone_true" onclick="copyNode(true)">深拷贝</button>
    <script>
        function copyNode(bool) {
            // 1.获取select标签
            let select = document.getElementById('sex')
            // 2.复制select
            let copySelect = select.cloneNode(bool)
            //3.获取div
            let mydiv = document.getElementById('div_clone')
            let br = document.createElement('br')//添加br标签
            mydiv.appendChild(copySelect)
            mydiv.appendChild(br)
        }
    </script>
</body>

3. hasChildNodes()：判断当前节点是否有子节点

返回值为false：表示没有子节点

返回值为true：表示有子节点

<div id="dd">
        <p>钱学森</p>
        <p>蒋英</p>
        <p>金庸</p>
    </div>
    <button type="button" id="btn_del" onclick="delNode()">删除</button>
    <script>
        function delNode(){
            let div = document.getElementById('dd')
            if(div.hasChildNodes()){
                div.removeChild(div.lastChild)
            }
        }
    </script>

4. 替换节点：replaceChild（newNode，oldNode）

用newNode节点替换oldNode节点

function replaceNode(txt,bj)
{
 var rep = document.getElementById("b1");
 if(rep)
 {
 var newNode = document.createElement(bj);//创建新节点
 newNode.setAttribute("id","b1");//设置新节点的id属性
 var newTxt = document.createTextNode(txt);//创建节点文本
 newNode.appendChild(newTxt);//将文本添加到节点中
 rep.parentNode.replaceChild(newNode,rep);//替换节点
 }
}
</script>
<body>
<h2 id="b1">可以替换文本内容</h2>
 输入标记：
 <input id="bj" type="text" /><br /><br />
 输入文本：
 <input id="txt" type="text" /><br /><br />
 <input type="button" value="替换" onclick="replaceNode(txt.value,bj.value)" />

5. 追加节点

（1）创建元素节点：

document.createElement()

let txt_node = document.createTextNode(txt)

（2）在指定节点的末尾追加节点

appendChild(newNode)

（3）在指定节点之前添加节点

insertBefore(newNode，node)：将结点newNode插入到节点node之前

该方法需要通过插入节点(node)的父节点来调用