DOM的基础知识

一、DOM的定义

1、定义：Document Object Model：文档对象模型。

2、核心：document对象。

3、作用：可以访问和操作XML和HTML文档中标签、标签的属性、节点的属性和方法。

4、在DOM中html看做是一个倒立的树（树状结构），一个html页面就是一个DOM对象。

       DOM HTML树的根节点：html。

       元素（Element）：html文档中的标签。

       节点（Node）：html文档中的内容。

5、DOM树中节点的分类：

       标签节点：所有标签。

       属性节点：标签的属性--内置属性、自定义属性。

       文本节点：标签中的文本、换行、空格等。

       注释节点

6、基本概念

​       根节点：根节点是html，有且只能有一个。

       子节点：某个节点的下一级节点。

      ​ 父节点：某个节点的上一级节点。

      ​ 兄弟节点：拥有相同父节点的节点。

二、通过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。

三、document对象的属性

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

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

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

四、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内容”)：向文档写入指定的内容后并换行

六、标签的属性

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

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

   3、getAttribute(name)：获取标签的某个属性值。参数name代表属性名

  ​ 4、removeAttribute(name)：删除标签的某个属性。参数name代表属性名

七、元素的样式

​ 1、用法：

​ （1）元素名.style.样式属性名

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

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

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

     ​ b、如何在js程序运行过程中动态的添加class属性值：使用classList属性

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

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

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

​ （2）方法：

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

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

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

     ​ d、item(index)：根据index，来获取元素的类名

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

<div class="d1 s1 s2 s3 s4" id="dt"></div>
    <!-- <button id="btn_class">class样式列表</button> -->
    <button id="btn_center">居中</button>
    <button id="btn_remove">恢复</button>
    <button id="btn_toggle">交替</button>
    <button id="btn_item">索引</button>
    <script>
        // document.querySelector('#btn_class').addEventListener('click',function(){
        //     let clazz = document.querySelector('#dt')
        //     console.log(clazz.classList)
        // })
        document.querySelector('#btn_center').addEventListener('click',function(){
            document.querySelector('#dt').classList.add('s2')
        })
        document.querySelector('#btn_remove').addEventListener('click',function(){
            document.querySelector('#dt').classList.remove('s2')
        })
        document.querySelector('#btn_toggle').addEventListener('click',function(){
            document.querySelector('#dt').classList.toggle('s2')
        })
        document.querySelector('#btn_item').addEventListener('click',function(){
            //  let  class_name = document.querySelector('#dt').classList.item(3)
            //  console.log(class_name)
            let  flag = document.querySelector('#dt').classList.contains('s5')
            console.log(flag)
        })
    </script>

3、DOM中节点的操作：采用操作节点的方式来操作页面中的元素

​  （1）获取节点时使用的属性：

       ​ a、firstChild：获取当前节点的首个子节点。

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

​        b、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>

      c、lastChild：访问当前节点的最后一个子节点

    ​  d、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>

​      e、nodeName：节点的名称

     ​ f、nodeValue：节点的值

    ​  g、nodeType：节点类型

         返回值：

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

           ​ 2：表示属性节点

           ​ 3：表示文本节点

     ​ h、parentNode：访问当前元素节点的父节点

     ​ i、childNodes：当前节点的所有子节点

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

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

       ​   （2）不同点：

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

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

               c、​ getAttribute(‘id’)：用来获取元素的id属性值

              ​ d、getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）

4、追加节点

​ （1）创建元素节点：

     ​ document.createElement()

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

     ​ appendChild(newNode)

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

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

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

  <h2 id="ht">颐和园</h2> 
    <input type="text" name="txt" id="node_value">
    <button id="btn_insert">插入元素</button>
    <script>
        //1.获取按钮
        let insert = document.querySelector('#btn_insert')
        //2.给按钮注册click事件：
        insert.addEventListener('click',function(){
            //2.1 获取input的值
            let txt = document.querySelector('#node_value').value
            //2.2 创建文本节点，文本内容为txt
            let txt_node = document.createTextNode(txt)
            //2.3 创建元素节点：创建h2标签
            let my_h2 = document.createElement('h2')
            //2.4 将文本节点追加到h2中
            my_h2.appendChild(txt_node)
        //3.获取插入位置上的标签：<h2 id="ht">颐和园</h2>
           let node_ht = document.querySelector('#ht')
           if(node_ht.parentNode){ //node_ht存在父节点,通过父节点调用insertBefore插入节点
              node_ht.parentNode.insertBefore(my_h2,node_ht)
           }
        })

  （4）创建文本节点：

     ​ document.createTextNode()

let mydiv = document.createElement('div')
let h2 = document.createElement('h2')
let txt = document.createTextNode('圆明园')
h2.appendChild(txt)
mydiv.appendChild(h2)
document.body.appendChild(mydiv)

例题：利用DOM创建ul无序列表

let arr = ['西游记','红楼梦','水浒传','三国演义']
let my_ul = document.createElement('ul') //创建ul标签
for(let i=0;i<arr.length;i++){
       let txt_node = document.createTextNode(arr[i]) //创建文本节点
       let li_node = document.createElement('li') //创建li节点
       li_node.appendChild(txt_node) //将文本节点添加到li节点中
       my_ul.appendChild(li_node)
 }
document.body.appendChild(my_u

5、复制节点：

   ​ 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>

​ 6、删除子节点：

​       removeChild（node）

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

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

​ 7、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>

​ 7、替换节点：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)" />