DOM 的基本概念及操作

DOM(Document Object Model): 文档对象模型
其实就是操作 html 中的标签的一些能力
我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面中添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些 css 样式
- ...
DOM 的核心对象就是 document 对象
document 是 JS 内置的一个对象, 内部提供了很多属性和方法, 帮我们便捷的操作页面标签
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM 对象

获取非常规元素

document.documentElement
document.head
document.body

// 1. html
var htmlEle = document.documentElement
console.log(htmlEle)
// 2. head
var headEle = document.head
console.log(headEle)
// 3. body
var bodyEle = document.body
console.log(bodyEle)

获取常规元素

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

getElementById

getElementById 是通过标签的 ID 名称来获取标签的
因为页面中的 ID 是唯一的, 所以获取到的就是一个元素

<body>
    <div id="box"></div>
    <script>
    	var box = document.getElementById('box')
    	console.log(box) // 页面中 ID 为 box 的标签
    </script>
</body>

getElementsByClassName

getElementsByClassName 是通过标签的 class 名称来获取标签的
因为页面中可能会有多个元素的 class 名称一样, 所以获取到的是一组元素
哪怕页面中只有一个, 获取到的也是一组元素, 只不过这一组元素只有一个 DOM 元素

<body>
<div calss="box"></div>
<script>
    var box = document.getElementsByClassName('box')
    console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
</script>
</body>

注意!!! getElementsByClassName 是一组长得很像数组的数据解构, 但它不是数组, 我们叫这种数据结构为: 伪数组
这一组数据也是按照索引排列的, 所以我们想要准确的拿到这个 div, 需要用索引来获取

getElementsByTagName

getElementsByTagName 是通过标签的标签名称来获取标签饿
因为页面中可能有多个元素的标签名称一样, 所以获取到的是一组元素
哪怕只有一个这个标签名, 获取到的也是一组数据, 只不过一组数据中只有一个 DOM 元素

<body>
<div></div>
<script>
    var box = document.getElementsByTagName('div')
    console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
</script>
</body>

和 getElementsByClassName 一样, 获取到的是一个长得很像数组的元素
必须要用索引才能准确地到 DOM 元素

一、获取标签

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

1. querySelector

语法: document.querySelector('像写CSS选择器一样书写标签')
querySelector 是按照选择器的方式来获取元素
也就是说, 按照我们写 css 的时候的选择器来获取
这个方法只能获取到一个元素, 并且是页面中第一个满足条件的元素
返回值：符合条件的第一个标签

console.log(document.querySelector('div'))  // 获取页面中第一个 div 元素
console.log(document.querySelector('.box'))  // 获取页面中第一个 有 box 类名的元素
console.log(document.querySelector('#box'))  // 获取页面中第一个 id 名为 box 的元素

2.querySelectorAll

语法: document.querySelectorAll('像写CSS选择器一样书写标签')
querySelectorAll 是按照选择器的方式来获取元素
这个方法能获取到所有满足条件的元素, 以一个伪数组的形式返回
返回值: 返回一个符合条件的标签组成的伪数组

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

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

二、操作属性

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

1.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>'

2.innerText

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

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

设置元素内部的 HTML 解构

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

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

innerHTML/innerText/value

innerHTML/innerText 能够给输入框之外的标签添加展示文本
value 是专门给输入框添加展示文本
innerHTML/innerText
- innerHTML 认识字符串中的标签, 能够将字符串中的标签转换成真正的标签进行渲染
- innerText 不认识字符串中的标签
- 推荐使用 innerText 能够防止用户注入恶意代码

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

语法：元素/标签.style
专门用来个元素添加 css 样式的,添加的都是行内样式

getComputedStyle('要查询样式的标签').要查询的样式名

能够获取到元素的样式 (行内和非行内都可以)
但是获取到的内容是只读的, 只允许查询, 不允许修改

<div></div>

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

随机背景

    <button id="btn">点击更改背景色</button>
    <script>
        // 0. 获取标签
        var btn = document.querySelector('#btn')
        var body = document.querySelector('body')

        /**
         *  添加事件
         * 
         *      1. 声明一个数组, 数组内部存放各种各样的颜色
         *      2. 点击事件触发的时候, 随机从数组内拿到一个颜色
         *      3. 赋值给 body 的背景色
        */

        // 1. 声明一个数组, 数组内部存放各种各样的颜色
        var arr = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#800080', '#ffa500']
        btn.onclick = function () {
            // 2. 点击事件触发的时候, 随机从数组内拿到一个颜色
            var num = Math.floor(Math.random() * arr.length)

            body.style.backgroundColor = arr[num]
        }
    </script>

className

专门用来操作元素的类名

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

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

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

classList

*元素/标签.classList

返回值是一个伪数组
数组内下表对应的是我们的每一个类名
value 属性对应的是我们完整类名的字符串

        <div class="box1 qwe asd zxc">你好 2310</div>
        // console.log(box.classList)

        box.classList.add('box2')   // 向这个标签上在追加一个类名, 原本的类名不受影响
        box.classList.remove('qwe') // 删除指定类名 
        box.classList.remove('asd')

三、数据渲染

通过 js 将html标签写到页面中
优点：更加灵活，而不是写死数据
js 创建html标签
- var el = document.createElement('想要创建的标签')
js 向元素中追加标签
- el(父级).appendChild(想要追加的标签)

四、事件冒泡

当你点击了一个元素的时候, 触发了这个元素的点击事件, 那么按照JS中事件冒泡的特性会将这个事件的触发也传递给自己的父级
冒泡会从点击的元素开始, 一直到页面最顶层的元素，哪怕你的元素没有绑定点击事件, 也会触发事件冒泡

    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4"></div>
            </div>
        </div>
    </div>

        <script>
        var box1 = document.querySelector('.box1')
        var box2 = document.querySelector('.box2')
        var box3 = document.querySelector('.box3')
        var myBody = document.querySelector('body')
        // box1.onclick = function () {
        //     console.log('点击了蓝色盒子')
        // }
        box2.onclick = function () {
            console.log('点击了粉色盒子')
        }
        myBody.onclick = function () {
            console.log('body')
        }
        box3.onclick = function () {
            console.log('点击了绿色盒子')
        }
        </script>

四、事件委托

就是利用事件冒泡的原理将所有子元素的事件, 委托给共同的父级

    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
    </ul>
    <script>
    var myUl = document.querySelector('ul')
        myUl.onclick = function (e) {
            if (e.target.className === 'item') {
                console.log('触发事件')
            }
        }

        // 2. 新增一个 li
        var myLi = document.createElement('li')
        myLi.className = 'item'
        myLi.innerHTML = '我是通过 JS 创建的, 请测试我是否具有点击事件'
        document.querySelector('ul').appendChild(myLi)
    </script>

JS---DOM

DOM 的基本概念及操作

获取非常规元素

获取常规元素

getElementById

getElementsByClassName

getElementsByTagName

一、获取标签

1. querySelector

2.querySelectorAll

二、操作属性

1.innerHTML

2.innerText

innerHTML/innerText/value

H5 自定义属性

style

随机背景

className

classList

三、数据渲染

四、事件冒泡

四、事件委托