DOM 的基本概念及操作

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

获取常规元素

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

querySelector

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

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

querySelectorAll

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

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

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

操作属性

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

innerHTML

获取元素内部的 HTML 解构

js
复制代码
<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // <p><span>hello</span></p>

设置元素内部的 HTML 解构

js
复制代码
<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

innerText

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

js
复制代码
<div>
    <p>
        <span>hello</span>
    </p>
</div>
var div = document.querySelector('div')
console.log(div.innerHTML)    // hello

设置元素内部的 HTML 解构

js
复制代码
<div></div>
var div = document.querySelector('div')
div.innerHTML = '<p><span>hello</span></p>'

会把 '

hello

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

H5 自定义属性

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

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

js
复制代码

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

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

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

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

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

js
复制代码
<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

专门用来操作元素的类名
在设置的时候, 不管之前有没有类名, 都会全部被设置的值覆盖

js
复制代码
<div class='box'></div>

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

js
复制代码
 <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>

小案例

js
复制代码
<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('点击我会触发');
        }