获取DOM标签对象

• • 一、认识DOM
  • 二、获取非常规DOM(html head body)
  • • 1、HTML
    • 2、head
    • 3、body
  • 三、获取常规DOM
  • • （一）按照类名、标签名和ID名获取标签
    • • 1、类名(`伪数组`)
      • 2、标签名(`伪数组`)
      • 3、ID名(`唯一性`)
    • （二）按照选择器获取标签
    • • 1、querySelector
      • 2、querySelectorAll(`伪数组`)
  • 四、innerHTML与innerText
  • • （一）innerHTML
    • • 1、获取页面的div标签
      • 2、操作元素的属性
    • （二）innerText
    • • 1、获取页面的div标签
      • 2、操作元素的属性
  • 五、元素属性的获取设置与移出
  • • （一）需求: 获取元素的某些属性
    • （二）需求: 修改某些元素的某些属性
    • （三）移出某些元素的某个属性
  • 六、H5自定义属性
  • • （一）获取H5自定义属性
    • （二）设置语法
    • （三）删除语法
  • 七、获取元素类名
  • • （一）第一种语法
    • • 1、获取语法
      • 2、设置语法
    • （二）第二种语法
    • • 1、获取语法
      • 2、设置语法
      • 3、删除语法
  • 八、获取元素样式
  • • （一）获取元素样式(行内)
    • • 1、获取元素样式
      • 2、设置元素样式
    • （二）获取元素样式
    • • 1、非行内
      • 2、获取元素样式

笔记首发

一、认识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名

    
我是具有class的box1
我是具有class的box2
我是具有class的box3
我是一个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的文本
我是P的文本我是SPAN的文本
我是内部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 = '
1234567890
';

（二）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 = '
1234567890
';

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

    
我是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自定义属性

    
H5新增自定义属性

        /***  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

（一）第一种语法

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 

• 语法: 元素.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 

2、获取元素样式

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

        var oBox = document.getElementsByClassName('box')[0];console.log(window.getComputedStyle(oBox).width);console.log(window.getComputedStyle(oBox).backgroundColor);