【学习笔记39】获取DOM标签对象

---

笔记首发

一、认识DOM

1. 对页面删除一个节点，增加一个节点
2. 对某一个节点添加一个class类名，删除某一个节点的class类名

二、获取非常规DOM(html head body)

1、HTML

• HTML语法: document.documentElement;

        var htmlEle = document.documentElement;
        console.log(htmlEle);

2、head

• 语法：head语法: document.head;

        var headEle = document.head;
        console.log(headEle);

3、body

• 语法：body语法: document.body;

        var bodyEle = document.body;
        console.log(bodyEle);

三、获取常规DOM

（一）按照类名、标签名和ID名获取标签

• JS在获取常规元素时与CSS一样, 可以通过 类名、标签名和ID名

    <div class="box">我是具有class的box1</div>
    <div class="box" id="box2">我是具有class的box2</div>
    <div class="box">我是具有class的box3</div>
    <p>我是一个P标签</p>

1、类名(伪数组)

        var oBox = document.getElementsByClassName('box');
        console.log(oBox);

1. oBox是一个伪数组, 想要获取到某一个元素, 可以通过下标
2. 不管页面具有这个类名的元素有多少个, 获取到的永远是伪数组的形式
3. 伪数组: 长得和数组类似, 有下标有length, 但是没有数组的常用方法

2、标签名(伪数组)

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

注意：oDiv也是一个伪数组, 想要获取到某一个元素, 可以通过下标

3、ID名(唯一性)

        var oBox2 = document.getElementById('box2');
        console.log(oBox2);

• 因为ID通常都是独一无二的
• 所以这里获取到的就是一个具有 box2 ID名的标签, 而不是一个伪数组

（二）按照选择器获取标签

1、querySelector

• 获取到满足条件的第一个标签

        var myDiv = document.querySelector('.box');
        console.log(myDiv);

2、querySelectorAll(伪数组)

• 获取到满足条件的所有标签

        var myDivAll = document.querySelectorAll('.box');
        console.log(myDivAll);

四、innerHTML与innerText

    <div>
        我是DIV的文本
        <p>
            我是P的文本
            <span>
                我是SPAN的文本
            </span>
        </p>
        <div>
            我是内部DIV的文本
        </div>
    </div>

（一）innerHTML

1、获取页面的div标签

• 获取到标签内部的文本与HTML结构

        // 获取页面的div标签
        var oDiv = document.querySelector('div');    
        console.log(oDiv.innerHTML);

2、操作元素的属性

• 赋值时会识别字符串中的html结构
• 如果有实际的标签, 会把它当成标签渲染到页面上

        var oDiv = document.querySelector('div');    
        oDiv.innerHTML = '1234567890';
        oDiv.innerHTML = '<div>1234567890</div>';

（二）innerText

1、获取页面的div标签

只会获取到页面结构的文本内容, HTML结构会被忽略掉

        var oDiv = document.querySelector('div');    
        console.log(oDiv.innerText);

2、操作元素的属性

• 赋值时不会识别字符串中的html结构
• 如果有实际的标签, 会把它当成字符串渲染到页面上

        // 获取页面的div标签
        var oDiv = document.querySelector('div');    
        oDiv.innerText = '1234567890';
        oDiv.innerText = '<div>1234567890<div>';

五、元素属性的获取设置与移出

    <div class="box" a="100" b="200">我是div标签</div>

（一）需求: 获取元素的某些属性

• 语法: 元素.getAttribute('要查询的属性名');

        // 1. 获取元素
        var oBox = document.getElementsByClassName('box')[0];
        console.log(oBox);

        // 2. 获取元素的某些属性
        console.log(oBox.getAttribute('class'));
        console.log(oBox.getAttribute('a'));
        console.log(oBox.getAttribute('b'));

（二）需求: 修改某些元素的某些属性

• 语法: 元素.setAttribute('要设置的属性名', '要设置的属性值');

        var oBox = document.getElementsByClassName('box')[0];
        oBox.setAttribute('a', 'qwer');
        oBox.setAttribute('b', 'asdf');
        oBox.setAttribute('qqq', 'qqqq123123');
        console.log(oBox);

（三）移出某些元素的某个属性

语法: 元素.removeAttribute('要移除的属性名');

        var oBox = document.getElementsByClassName('box')[0];
        oBox.removeAttribute('b');
        console.log(oBox);

六、H5自定义属性

    <div qq="123" data-cs="123456789">H5新增自定义属性</div>

        /**
         *  data-cs="123456789"
         *      H5自定义属性中data-       是固定的
         *      cs是我实际的属性名
         *      "123456789"是我实际的属性值
        */

（一）获取H5自定义属性

• 获取语法：元素.dataset.属性名

        var oDiv = document.querySelector('div');
        console.log(oDiv)

        console.log(oDiv.dataset.cs);

（二）设置语法

• 语法：元素.dataset.属性名 = 属性值;
• 标签中实际拥有; 做修改操作
• 标签中实际没有; 做新增操作

        var oDiv = document.querySelector('div');

        // 设置语法
        oDiv.dataset.cs = 'qwertyuiop';  // 标签中实际拥有; 做修改操作
        oDiv.dataset.age = 18;           // 标签中实际没有; 做新增操作

        console.log(oDiv);

（三）删除语法

• 语法：delete 元素.dataset.属性名;

        var oDiv = document.querySelector('div');

        // 删除操作
        delete oDiv.dataset.cs;
        console.log(oDiv);

七、获取元素类名

    <div class="item box">我是一个具有两个类名的DIV</div>

（一）第一种语法

1、获取语法

• 获取语法：元素.className

        var oDiv = document.querySelector('div');
        console.log(oDiv);
        
        //获取语法
        console.log(oDiv.className);

2、设置语法

• 设置语法: 元素.className = '新的类名';

        var oDiv = document.querySelector('div');
        oDiv.className = oDiv.className + ' new_box';

（二）第二种语法

1、获取语法

• 获取语法(伪数组)：元素.classList

        var oDiv = document.querySelector('div');

        // 获取语法
        console.log(oDiv.classList);

2、设置语法

• 设置语法: 元素.classList.add('新的类名')

        var oDiv = document.querySelector('div');

        // 设置语法
        oDiv.classList.add('new_box');

3、删除语法

• 删除语法: 元素.classList.remove('要删除的类名')

        var oDiv = document.querySelector('div');

        //删除语法
        oDiv.classList.remove('box');

八、获取元素样式

（一）获取元素样式(行内)

<div class="box" style="width: 200px; height: 300px; background-color: pink"> 我是一个具有样式的div </div>

• 语法: 元素.style.某个CSS属性
• 只能获取到行内样式

1、获取元素样式

        var oBox = document.getElementsByClassName('box')[0]

        console.log(oBox.style.width);
        console.log(oBox.style.height);
        // console.log(oBox.style.background-color);      // 错误写法
        console.log(oBox.style['background-color']);      // 中括号语法
        console.log(oBox.style.backgroundColor);          // 驼峰命名

2、设置元素样式

• 语法：元素.style.属性名 = 属性值;

        var oBox = document.getElementsByClassName('box')[0];

        oBox.style.backgroundColor = 'blue';

（二）获取元素样式

1、非行内

• 注意: 这种方式获取到的是只读的属性
• 只读: 只能获取到, 但是不允许修改

    <div class="box"> 我是一个具有样式的div </div>

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>

2、获取元素样式

语法：window.getComputedStyle(元素).属性名

        var oBox = document.getElementsByClassName('box')[0];

        console.log(window.getComputedStyle(oBox).width);
        console.log(window.getComputedStyle(oBox).backgroundColor);