DOM 的基本概念及操作

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

获取常规元素

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

querySelector

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

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

querySelectorAll

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

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

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

操作属性

我们获取到元素后, 可以直接操作 DOM的属性, 然后直接把效果展示在页面上
innerHTML和innerText能够给输入框之外的标签添加展示文本
innerHTML 认识字符串中的标签, 能够将字符串中的标签转换成真正的标签进行渲染
innerText 不认识字符串中的标签
推荐使用 innerText 能够防止用户注入恶意代码

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 解析成标签

value

设置input输入框的提示内容（或输入内容）的方法
- 语法：元素/标签.value
- 注意：获取的值是字符串形式

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 能够拿到行内样式, 或者给添加一个行内样式


<div></div>
var div = document.querySelector('div')
//修改元素的样式
div.style.width = '100px'
div.style.hright = '100px'
div.style.backgroundColor = 'pink'

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

// 非行内样式 和 行内样式, 都能正常获取, 但是获取到的值 不能被修改
        console.log(getComputedStyle(oDiv).width)

        // getComputedStyle(oDiv).width = '800px'

案例：点击按钮，让背景随机更换

<button id="btn">点我呀</button>
    <script>
        // 获取标签
        // 方法一:
        var obody = document.querySelector('body')
        var obutton = document.querySelector('#btn')
        function getNum(min,max){
            var r = parseInt(Math.random() * (max - min + 1) + min)
            var g = parseInt(Math.random() * (max - min + 1) + min)
            var b = parseInt(Math.random() * (max - min + 1) + min)
            return `rgb(${r},${g},${b})`;
        }
        obutton.onclick = function(){
            obody.style.backgroundColor = getNum(0,255);
            console.log('点击按钮我就会触发');
        }
        // 方法二：
        // 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

 <script>
        /**
         *  操作元素类名
         * 
         *      元素/标签.className     =>  能够得到元素目前拥有的类名
         *          还可以给这个属性重新赋值, 然后修改当前标签的类名
         * 
         *      元素/标签.classList
         *          返回值 是一个伪数组
         *              数组内下表对应的是我们的每一个类名
         *              value 属性对应的是我们完整类名的字符串
        */

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

        // 1. className
        // console.log(box.className)
        // box.className = 'box2'   // 当前方式 不管之前有多少类名, 全都重新覆盖掉
        // box.className = box.className + ' box2'
        // box.className += ' box2'    // 类名之间一定要加 空格
        // box.className = ''  // 相当于清空之前的所有类名

        // 2. classList
        // console.log(box.classList)

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

classlist.add

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

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

小案例

<style>
//点击button按钮弹出遮罩层点击关闭会关闭遮罩层
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
        }

        /* 不显示遮罩层 */
        .bigbox {
            display: none;

        }

        /* 显示遮罩层 */
        .bigbox_one {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 0;
            left: 0;

        }

        .smallbox {
            width: 300px;
            height: 200px;
            margin: 200px auto;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <button class="btn1">点击我</button>
    <div class="bigbox">
        <div class="smallbox">
            <h3>欢迎光临</h3>
            <p>你好</p>
            <button id="smallbox_btn">关闭</button>
        </div>
    </div>
    <script>
        var obtn = document.querySelector('.btn1')
        console.log(obtn);
        var obigbox = document.querySelector('.bigbox')
        console.log(obigbox);
        var off = document.querySelector('#smallbox_btn')
        console.log(off);


        obtn.onclick = function () {
            obigbox.className = 'bigbox_one'
            console.log('点击我会触发');
        }
        off.onclick = function () {
            obigbox.className = 'bigbox'
            console.log('点击我会触发');
        }

    </script>

数据渲染

通过 js 将html标签写到页面中
优点：更加灵活，而不是写死数据

案例

js 创建html标签
- var el = document.createElement('想要创建的标签')
js 向元素中追加标签
- el(父级).appendChild(想要追加的标签)

事件冒泡

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

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

        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('点击了绿色盒子')
       }

事件委托

将所有的子元素的的事件，委托给共同的父级

        oTab.onclick = function (e) {
           // 改变数组data内的数据
           // 当点击的DOM节点的类名为 all 时，实现全选反选
           if (e.target.className === 'all') {
               for (var m = 0; m < data.length; m++) {
                   data[m].check = e.target.checked;
               }
           }
            // 当点击的DOM节点的类名为 info 时，改变对应的 check 的值
           if (e.target.className === 'info') {
               for (var k = 0; k < data.length; k++) {
                   // 当自定义的id 和 对象里的 id 相等时，改变check的值
                   if (e.target.dataset.id - 0 === data[k].id) {
                       data[k].check = !data[k].check
                   }
               }
           }
           // 重新渲染
           dataTable()
       }

获取元素偏移量

就是元素在页面上相对于参考父级的的左边和上边的距离

offsetParent

获取元素偏移量的参考父级
假设要给一个元素绝对定位的时候
它是根据谁来进行定位的，那么这个元素的偏移量参考父级就是谁

offsetLeft / offsetTop

获取的时元素左边的和上边的偏移量
- offsetLeft 该元素相对于参考父级的左侧偏移量
- fsetTop 该元素相对于参考父级的上侧偏移量

获取元素尺寸

获取元素的占位面积

offsetWidth 和 offsetHeight

offsetWidth ：获取元素内容 + padding + 边框
offsetHeight ：获取元素内容 + padding + 边框*

注意

获取到的尺寸是没有单位的数字
当元素在页面中不占位时，获取到的值是 0
- display: none在页面是不占位的
- visibility: hidden 元素在页面占位

获取浏览器窗口尺寸

document.documentElement.clientWidth获取浏览器可视窗口的宽度
document.documentElement.clientHeight获取浏览器可视窗口的高度

DOM--一条龙服务，一看就会

DOM 的基本概念及操作

获取常规元素

querySelector

querySelectorAll

操作属性

innerHTML

innerText

value

H5 自定义属性

style

案例：点击按钮，让背景随机更换

操作元素类名

className

classlist.add

小案例

数据渲染

案例

事件冒泡

事件委托

获取元素偏移量

offsetParent

offsetLeft / offsetTop

获取元素尺寸

offsetWidth 和 offsetHeight

获取浏览器窗口尺寸