DOM操作一、认识DOM DOM其实就是对HTML标签进行操作节点：任意一个标签都可以是一个节点对页面删除一个节点

一、认识DOM

DOM其实就是对HTML标签进行操作
节点：任意一个标签都可以是一个节点
对页面删除一个节点增加一个节点
删除一个节点的类名

二、获取非常规DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        p{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>

    <div>
        <p>我是p标签</p>
    </div>
    <script>
        /*
            1.获取非常规DOM(HTML 、head 、 body)

                输出的内容是标签以及标签里面的内容
        */

        // 获取的是html标签
        // 语法形式：document.documentElement
        var htmlDiv = document.documentElement;
        console.log(htmlDiv);

        // 获取的是head标签
        // 语法i形式：document.head
        var htmlHead = document.head;
        console.log(htmlHead);


        // 获取的是body标签
        // 语法形式：document.body
        var htmlBody = document.body;
        console.log(htmlBody);


    </script>
</body>
</html>

三、获取常规标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="box1">我是div标签</div>
    <div class="box">我是div标签</div>
    <div class="box">我是div标签</div>
    <div>我是div标签</div>
    <script>
        /*
            JS在获取常规元素时与CSS一样，可以通过类名，ID名，标签名

            伪数组
                oBox是一个伪数组 想要获取到某一个元素，可以通过下标

                长得和数组类似，有下标有length，但是没有数组的常用方法

            不管页面具有这个类名的元素有多少个 获取的永远是伪数组的形式

        
            语法形式：document.getElementByTagName();
                应为ID通常都是独一无二地
        
        */
        
        // 通过class名获取      
        // 获取伪数组
        let oBox = document.getElementsByClassName('box');
        console.log(oBox);

        //通过标签名获取
        // 获取伪数组
        let oDiv = document.getElementsByTagName('div');
        console.log(oDiv);

        // 通过id去获取
        // 获取的是标签
        let oBox1 = document.getElementById('box1');
        console.log(oBox1);

        console.log('----------------------');


        // 获取单个标签  类名  ID名
        let oBox11 = document.querySelector('div');
        console.log(oBox11);
        let oBox111 = document.querySelectorAll('div')[0];
        console.log(oBox111);

        // 获取全部标签
        let oDivs = document.querySelectorAll('div');
        console.log(oDivs);
        let oBoxs = document.querySelectorAll('.box');
        console.log(oBoxs);

    </script>
</body>
</html>

四、设置元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" conte
    nt="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            color: white;
        }
        .xx{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>我是P标签</p>
        <p>我是P标签</p>
        <p>我是P标签</p>

    </div>
    <script>
        /*
            innerHTML   
                获取到标签内部的文本内容与HTML解结构

            innerText
                只会获取到页面结构的文本内容，HTML结构不会被解析
        
        */


        let oDiv = document.querySelector('div');
        let oP = document.querySelectorAll('p');

        console.log(oDiv);
        console.log(oP);

        // 把div里面的内容改掉
        // 也就是向div里面填加内容
        // oDiv.innerHTML = '我是div标签';
        // oDiv.innerHTML = '<div class=xx>我是div标签</div>';

        // oDiv.innerText = '羽 生';
        oDiv.innerText = '<div class=xx>我是div标签</div>';


    </script>
</body>
</html>

五、标签属性的设置与移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div class="box" a="100" b="200">羽生结弦</div>
    <script>
        /*
            自定义属性
                <div a='100'>我是div标签</div>
                    a就是一个自定义属性
        
        */


        let oDiv = document.getElementsByTagName('div')[0];
        console.log(oDiv);

        // 获取标签属性值
        console.log(oDiv.getAttribute('class'));
        console.log(oDiv.getAttribute('a'));
        console.log(oDiv.getAttribute('b'));



        // 设置标签属性值  也就是修改标签属性值
        // 也可以新增属性
        // 语法形式：标签.getAttribute(原始属性名 , 修改的属性名);
        oDiv.setAttribute('a' , '柚子');
        oDiv.setAttribute('b' , '噗噗');
        oDiv.setAttribute('c' , '哈牛');


        
        // 在获取标签属性值  在控制台打出新的标签属性值
        // 语法形式：标签.getAttribute(属性名);
        console.log(oDiv.getAttribute('a'));
        console.log(oDiv.getAttribute('b'));


        oDiv.innerHTML = '噗噗';


        // 删除标签属性名
        oDiv.removeAttribute('a');
        oDiv.removeAttribute('b');



    </script>
</body>
</html>

六、自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" data-aa="yusheng"></div>
    <script>
        /*
            data-cs = "123456789";
                H5 自定义属性中data-   是固定的
                cs 是我实际的属性名  自己设定的
                "123456789"是我实际的属性值
        */

        // 获取标签
        let oDiv = document.querySelector('.box');
        console.log(oDiv);


        // 新增属性的查找
        console.log(oDiv.dataset.aa);

        // 新增属性
        console.log(oDiv.dataset.bb = 'youzi');
        console.log(oDiv.dataset.cc = 'youzi');
        console.log(oDiv.dataset.dd = 'youzi');

        // 删除属性
        delete oDiv.dataset.dd;
        delete oDiv.dataset.cc;
        
    </script>
</body>
</html>