DOM 的基本概念及操作

DOM(Document Object Model): 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面中添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 document 对象
document 对象是浏览器内置的一个对象, 里面存储这专门用来操作元素的各种方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象

获取常规元素

通过 JS 代码来获取页面中的标签, 获取后我们就可以操作这些标签

querySelector

querySelector 是按照选择器的方式来获取元素
也就是说, 按照我们写 css 的时候的选择器来获取
这个方法只能获取到一个元素, 并且是页面中第一个满足条件的元素

        //通过标签名获取
        var aDiv= document.querySelector('div')
        console.log(aDiv);
        //通过类名获取
        var aSpan= document.querySelector('.span1')
        console.log(aSpan);
        //通过id名获取
        var aP= document.querySelector('#p1')
        console.log(aP);
       
        // 获取全部
            //返回值是一个伪数组 有索引 有length 但是数组的一些方法他没有
        var bSpan= document.querySelectorAll('span')
        console.log(bSpan);
         
        //获取不存在的标签
            //返回null
        var bP= document.querySelector('#p2')
        console.log(bP); //null

querySelectorAll

querySelectorAll 是按照选择器的方式来获取元素
这个方法能获取到所有满足条件的元素, 以一个伪数组的形式返回

console.log(document.querySelectAll('div')) // 获取页面中的所有的 div 元素
console.log(document.querySelectAll('.div')) // 获取页面中的所有的 类名为 box 的元素

获取到的是一组数据, 也是需要用索引来获取到准确的每一个 DOM 元素

操作属性

我们获取到元素后, 可以直接操作 DOM的属性, 然后直接把效果展示在页面上

innerHTML

获取元素内部的 HTML 解构

<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // <p><span>hello</span></p>

设置元素内部的 HTML 解构

<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

innerText

获取元素内部的文本(只能获取到文本, 获取不到 html 标签)

<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // hello

设置元素内部的 HTML 解构

<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

会把 '
hello
' 当作一段文本出现在 div 元素内, 而不会吧 p 解析成标签

H5 自定义属性

在 H5 自定义属性中 data- 表示该属性是一个自定义属性
data- 以后的内容才是属性名
= 后面的内容才叫做属性值
每一个元素身上天生自带一个属性, 叫做 dataset, 是一个类似对象的数据结构
内部记录的是该元素身上所有 data- 开头的自定义属性
对于该元素 H5 自定义属性的操作, 就是对这个数据结构的操作(对象操作语法)

<div data-a="100" class="box"></div>

var oDiv = document.querySelector('div')
// 增
oDiv.dataset.age = 18
// 删
delete oDiv.dataset.a
// 查
console.log(oDiv.dataset.age)

style

专门用来个元素添加 css 样式的
添加的都是行内样式
标签.style.样式名="要修改的值"
- 如oDiv.style.backgroundColor
获取样式
- 能够拿到行内样式, 或者给添加一个行内样式
- getComputedStyle('要查询样式的标签').要查询的样式名
  - 如 getComputedStyle(oDiv).backgroundColor
  - 能够获取到元素的样式 (行内和非行内都可以)
  - 但是获取到的内容是只读的, 只允许查询, 不允许修改

<div></div>

var div = document.querySelector('div')
div.style.width = '100px'
div.style.hright = '100px'
div.style.backgroundColor = 'pink'

className

专门用来操作元素的类名

<div class='box'></div>

var div = document.querySelector('div')
console.log(div.className)  // box
div.calssName = 'ceshi'
console.log(div.calssName)  // ceshi

在设置的时候, 不管之前有没有类名, 都会全部被设置的值覆盖