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

---

笔记首发

一、认识DOM

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

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

1、HTML

• HTML语法: document.documentElement;

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

2、head

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

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

3、body

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

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

三、获取常规DOM

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

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

    <div class="box">我是具有class的box1div>
    <div class="box" id="box2">我是具有class的box2div>
    <div class="box">我是具有class的box3div>
    <p>我是一个P标签p>
1
2
3
4

1、类名(伪数组)

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

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

2、标签名(伪数组)

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

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

3、ID名(唯一性)

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

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

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

1、querySelector

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

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

2、querySelectorAll(伪数组)

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

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

四、innerHTML与innerText

    <div>
        我是DIV的文本
        <p>
            我是P的文本
            <span>
                我是SPAN的文本
            span>
        p>
        <div>
            我是内部DIV的文本
        div>
    div>
1
2
3
4
5
6
7
8
9
10
11
12

（一）innerHTML

1、获取页面的div标签

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

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

2、操作元素的属性

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

        var oDiv = document.querySelector('div');    
        oDiv.innerHTML = '1234567890';
        oDiv.innerHTML = '
1234567890
';
1
2
3

（二）innerText

1、获取页面的div标签

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

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

2、操作元素的属性

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

        // 获取页面的div标签
        var oDiv = document.querySelector('div');    
        oDiv.innerText = '1234567890';
        oDiv.innerText = '
1234567890
';
1
2
3
4

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

    
我是div标签
1

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

• 语法: 元素.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'));
1
2
3
4
5
6
7
8

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

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

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

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

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

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

六、H5自定义属性

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

        /**
         *  data-cs="123456789"
         *      H5自定义属性中data-       是固定的
         *      cs是我实际的属性名
         *      "123456789"是我实际的属性值
        */
1
2
3
4
5
6

（一）获取H5自定义属性

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

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

        console.log(oDiv.dataset.cs);
1
2
3
4

（二）设置语法

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

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

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

        console.log(oDiv);
1
2
3
4
5
6
7

（三）删除语法

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

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

        // 删除操作
        delete oDiv.dataset.cs;
        console.log(oDiv);
1
2
3
4
5

七、获取元素类名

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

（一）第一种语法

1、获取语法

• 获取语法：元素.className

        var oDiv = document.querySelector('div');
        console.log(oDiv);
        
        //获取语法
        console.log(oDiv.className);
1
2
3
4
5

2、设置语法

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

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

（二）第二种语法

1、获取语法

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

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

        // 获取语法
        console.log(oDiv.classList);
1
2
3
4

2、设置语法

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

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

        // 设置语法
        oDiv.classList.add('new_box');
1
2
3
4

3、删除语法

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

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

        //删除语法
        oDiv.classList.remove('box');
1
2
3
4

八、获取元素样式

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

 我是一个具有样式的div 
1

• 语法: 元素.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);          // 驼峰命名
1
2
3
4
5
6
7

2、设置元素样式

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

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

        oBox.style.backgroundColor = 'blue';
1
2
3

（二）获取元素样式

1、非行内

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

    
 我是一个具有样式的div 
1

    
1
2
3
4
5
6
7

2、获取元素样式

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

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

        console.log(window.getComputedStyle(oBox).width);
        console.log(window.getComputedStyle(oBox).backgroundColor);
1
2
3
4