DOM的介绍

DOM：Document Object Model - 文档对象模型

是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

使用一套对象组成的结构来操作文档 - html文档

 文档：一个页面就是一个文档，DOM 中使用 document 表示
 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
注意：DOM 把以上内容都看做是对象。

DOM中最顶层的对象是 - window.document

---

获取标签：

 获取标签 - 我们操作文档的时候，其实大多数情况都是在操作html的标签

通过id名可以直接获取到标签

但是id名会有误差，比如id名叫var，在js中无法使用

---

 获取标签的方式：

 1.通过标签id名 - document.getElementById('id名')

var btn = document.getElementById('var')

 console.log(btn);

---

 2.通过类名 - document.getElementsByClassName('类名')

 获取到的是所有类名是指定的类名的标签组成的一个集合

 var box = document.getElementsByClassName('box')

 console.log(box);

 console.log(box[0]);

 获取到的集合 - 伪数组，不是数组，但是可以像数组一样取下标，有长度，可以遍历 - 但是不能使用数组的方法

box.push(111) // 报错

---

3.通过标签名 - document.getElementsByTagName('标签名') - 获取到的是伪数组集合

var divs = document.getElementsByTagName('div')

 console.log(divs);

---

4.通过name属性来获取标签 - document.getElementsByName('name属性的值')

var username = document.getElementsByName('username')

 console.log(username);

var sexes = document.getElementsByName('sex')

 console.log(sexes);

---

5.通过css选择器来获取一个标签rySelector('[name="username"]')

console.log(username);

 var div = document.querySelector('div')

 console.log(div);

 var box = document.querySelector('.box')

 console.log(box);

 var btn = document.querySelector('#var')

 console.log(btn);

---

 6.通过css选择器选择所有满足选择器的标签 - document.querySelectorAll('css选择器')

var divs = document.querySelectorAll('div')

console.log(divs);

---

内容操作：

 获取标签

var btn = document.querySelector('button')

console.log(btn);

设置标签的内容 - 标签.innerText = 值

 btn.innerText = '确定'

获取标签内容

console.log( btn.innerText );

 var div = document.querySelector('div')

console.log(div.innerText);

 div.innerText = '哈哈'

 div.innerText = '<b>哈哈</b>'

 innerText不能获取/设置 标签中包含的标签

 innerHTML - 让设置的内容中的标签被解析，获取到包含标签的内容

 div.innerHTML = '<b>哈哈</b>'

console.log( div.innerText );

console.log( div.innerHTML );

 表单元素通过value属性来进行操作的

var input = document.querySelector('input')

 获取表单元素的内容 - 标签.value

 console.log(input.value);

设置表单元素的内容 - 表单元素.value = 值

 input.value = '呵呵'

总结：

    双标签.innerText // 获取/设置标签中的文本内容

    双标签.innerHTML // 获取/设置包含标签的内容

    表单元素.value // 获取/设置表单元素的内容

---

属性操作：

 获取标签属性的值 - 标签.getAttribute('属性名')

var img = document.querySelector('img')

console.log( img.getAttribute('src') );

 设置标签属性 - 标签.setAttribute('属性名', '值')

 img.setAttribute('src', './images/2.webp')

 删除标签属性 - 标签.removeAttribute('属性名')

 img.removeAttribute('src')

 

标签.XX  -   对象访问属性的语法

 console.log(img);

 console.log(typeof img);

 dom中的元素，有一个特点，console.log只能输出标签的样子，不能输出原本的对象的样子

 通过console.dir输出dom元素，就是对象形式了

 console.dir(img)

 将标签看做对象的话，对象也是有属性的

console.log( img.src );

img.src = './images/2.webp'

console.log(img.age);

 img.age = 12

 console.log(img.age);

 这种操作是将标签当做对象看待的，不会体现在标签上的

 img.setAttribute('age', 12)

console.log( img.getAttribute('age') );

 总结：

操作标签属性 - 让这个属性能在标签中体现

    标签.setAttribute()

    标签.getAttribute()

    标签.removeAttribute()

操作对象属性 - 不体现在标签上的

    标签.属性名

属性能体现在标签上的，也能在对象中出现的属性，两种方式都可以进行操作

补充：

 直接表现在标签上的属性

标签.setAttribute()

标签.getAttribute()

标签.removeAttribute()

 不一定要表现在标签上的属性

标签.属性

标签.属性 = 值

delete 标签.属性

有时候我们需要获取标签的属性的值，为了方便，H5提供了一个API，用于快速获取标签特定的属性

 特定的属性 - 属性名：data-XXX

var box = document.querySelector('div')

标签.dataset.XX

console.dir( box );

console.log(box.dataset);

console.log(box.dataset.abc);

---

样式操作：

获取标签

var box = document.querySelector('.box')

 获取标签样式 - window.getComputedStyle(标签对象)

var style = getComputedStyle(box)

 console.log(style);

获取到标签所有css样式 键值对 组成的对象

 获取宽

 console.log( style.width );

 console.log( style.border );

 设置样式 - 标签对象.style.css键 = 值

 给标签设置的样式的值，一定是字符串

 box.style.background = 'red'

 box.style.background-color = 'blue' // 有连字符就不能使用.的操作形式

box.style['background-color'] = 'blue'

 js为了方便我们设置样式 - 如果键中带有连字符，就可以将这个键写成小驼峰形式

box.style.backgroundColor = 'green'

---

类名操作：

 获取标签

var div = document.querySelector('div')

设置样式

 div.style.width = '200px'

 div.style.height = '200px'

 div.style.backgroundColor = 'red'

类名的设置 - 标签.className = '类名'

 div.className = 'box'

设置多个类名

 div.className = 'box border'

 document.querySelector('button').onclick = function() {

 div.className = ''

  div.className = 'box'

 }

 获取类名 - 标签.className

 document.querySelector('button').onclick = function() {

 在div原本的类名基础上新增一个类名

先获取原本的类名

     var cname = div.className

   console.log(cname);

 将原本的类名跟新的类名拼接在一起

    cname += ' border'

    console.log(cname);

 将拼接好的两个类名赋值给标签

    div.className = cname

 }

 

 如果要在原本的类名基础上添加新的类名，操作比较繁琐 - 为了方便我们给标签添加/删除类名，js提供了属性 - classList

 标签.classList - 获取到标签所有的类名 - 返回伪数组

console.log( div.classList );

 classList有add方法，可以添加类名

document.querySelector('button').onclick = function() {

     div.classList.add('border')

    classList可以删除了黎明 - 用remove方法

    div.classList.remove('box')

     如果标签有类名，就删除，没有类名就添加 - toggle

    div.classList.toggle('border')

     可以判断标签是否带有某个类名 - contains - 返回布尔值

    var bool = div.classList.contains('border')

    console.log(bool);

}

总结：

    设置类名 - 标签.className = '类名'

    设置类名 - 标签.className = '类名 类名'

    获取类名 - 标签.className

    方便的操作类名

        标签.classList.add(类名) - 给标签添加一个类名

        标签.classList.remove(类名) - 给标签删除一个类名

        标签.classList.toggle(类名) - 给标签切换一个类名

        标签.classList.contains(类名) - 判断标签是否有某个类名 - 返回布尔值

---

html基本结构 - js提供了一些简便的获取方式

html标签

 console.log( document.documentElement );

 body标签

 console.log( document.body );

 head标签

 console.log( document.head );

网页标题文本的获取

 console.log( document.title );

 设置网页标题

---

节点：

 节点操作：操作节点

节点： .组成线，先组成面；用到html中，整个html网页，有多个东西组成的，每个东西包含：标签 + 文本 + 属性 + 注释。每个东西就叫做html的节点

输出ul下所有的节点 - ul的所有组成部分

 console.log( document.querySelector('ul').childNodes );

 实际在应用中，文本 - 字符串 - 将他放在标签中，修改内容

属性：属性操作

 注释：对开发来讲，没有意义

 要学习的节点操作：重点是学习标签操作

 标签节点创建：document.createElement('标签名')

节点插入：

 将标签放在另一个标签中的最后面 - 给一个父标签，追加一个子标签

语法：父.appendChild(子)

 将div追加到body中

 将标签添加到某个子标签的前面

语法：父.insertBefore(新的标签, 旧的子标签)

总结：

    标签创建document.createElement()

    标签插入：

        父.appendChild(子)

        父.insertBefore(新, 旧的子)

给标签添加文本内容 - 标签.innerText

给标签添加带标签的内容：

    标签.innerHTML = 字符串

    标签.appendChild(标签对象)

    标签.insertBefore(新标签对象, 旧标签对象)

根据标签之间的关系来获取标签

获取所有子标签节点 - 父.children

获取第一个子标签 - 父.firstElementChild

获取最后一个子标签 - 父.lastElementChild

获取上一个兄弟标签节点 - 标签.previousElementSibling

获取下一个兄弟标签节点 - 标签.nextElementSibling

获取父标签 - 子.parentElement

所有子：父.children

    第一个子：父.firstElementChild

    最后一个子：父.lastElementChild

    上一个兄弟：标签.previousElementSibling

    下一个兄弟：标签.nextElementSibling

    父：子.parentElement

其他节点的操作：

    标签替换：父.replaceChild(新, 旧)

    标签复制：标签.cloneNode(true)

    标签删除：父.removeChild(子)