Dom 操作

Document Object Model
文档      对象  模型

是 js 操作 html文档的方法

DOM操作的基本步骤

1,  设定 html css

2,  获取 html标签对象

3,  操作 html标签对象
    内容 属性 id class css样式 ...

Dom 获取元素

js 在获取常规元素时与css 一样，可以通过类名 ID名 标签名来获取
获取与元素都是以 document 开头，例如：document.getElementsByClassName('box');

获取非常规 Dom

1. 获取非常规Dom(html head body)

// (1).html语法  document.documentElement

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

// (2). head语法 document.head

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

// (3).body 语法： document.body
var bodyEle = document.body
console.log(bodyEle);

1. 获取常规 Dom

(1). 通过类名获取标签

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

// oBox 是一个伪数组，想要获取都某一个元素,可以通过下标
// 伪数组：长得和数组类似，有下标有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 名的标签 而不是伪数组

2. 通过querySelector 与 querySelectorAll 获取元素

querySelect: 获取到满足条件的第一个
querySelectorAll:按照选择器的形式 获取所有满足条件的标签

// 使用 querySelect 获取元素

var oDiv1 = document.querySelector('.box'); // 获取第一个class = "box"的元素
console.log(oDiv1);        

// 使用 querySelectorAll 获取元素

var oDiv2 = document.querySelectorAll('.box'); // 获取所有类名为 .box 的元素
console.log(oDiv2);

var oDiv2 = document.querySelectorAll('.box')[1]; // 获取第二个元素

设置元素属性

获取页面的div标签

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

获取属性

innerHtml:  获取到标签内部的文本 和 HTML 结构
innerText:  只会获取到页面结构的文本内容

操控元素的属性

innerHtml: 会识别 字符串中 的html结构
innerText: 不会识别字符串中的html结构，如果字符串中出现标签，会把它当成文本

oDiv.innerHTML = '<div>12345</div>';  // 会识别html结构 => 运行结果 12345

oDiv.innerText = '<div>123345</div>';  // 会把标签当作文本 => 运行结果 <div>123345</div>

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

//1. 获取元素
// html内容 =>   <div class="box" a="100" b="200">div文本</div>

var oBox = document.getElementsByTagName('box')[0];  // 获取到第一个
console.log(oBox);

// 2. 获取元素的某些属性
// 语法： 元素.getAttribute('要查询的属性名')

console.log(oBox.getAttribute('class')); // box
console.log(oBox.getAttribute('a'));  // 100
console.log(oBox.getAttribute('b'));  // 200

 // 4. 设置元素的某些属性 / 增加某些没有的属性名和属性值
 // 元素中存在该属性 则修改 ，若元素中没有该属性 则增加
 // 语法：元素.setAttribute('要设置的属性名','要设置的属性值')
 
oBox.setAttribute('a','aaa');  // 修改 a 的属性值为 aaa 
oBox.setAttribute('b','bbb');  // 修改 b 的属性值为 bbb 
oBox.setAttribute('c','ccc');  // 增加属性 c，属性值为 ccc 

//4. 移出元素的某个属性
// 语法： 元素.removeAttribute('要移出的属性名')

oBox.removeAttribute('b'); // 将属性 b 删除

H5新增自定义属性

  // html内容 =>  <div qq="123" data-cs="12345">H5新增自定义属性</div>
  //   data-cs="12345" 
  //          H5 自定义属性中 data-   是固定的
  //         cs 是实际的 属性名
  //         "12345" 是实际的属性值

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

// 获取H5 新增自定义属性
// 语法：元素名.dataset.属性   
console.log(oDiv.dataset.cs);  // 获取H5新增自定义属性 cs


//修改属性值           =>  标签内有此属性就是修改  没有就是设置或者新增
// oDiv.dataset.cs = 'qwe';  // 将cs 修改为 qwe
console.log(oDiv.dataset.cs = 'qwe');