WebAPI——DOM

什么是DOM

DOM，全称Document Object Model文档对象模型

文档：文档表示的就是整个的HTML网页文档
对象：对象表示将网页中的每一个部分都转换为了一个对象。
模型:使用模型来表示对象之间的关系，这样方便我们获取对象
- DOM 树

DOM查询

1.通过id名获得元素，返回一个对象

	let box = document.getElementById('box');
	console.log(box);

2.通过标签获得元素，返回一个伪数组

 // 获得数组内的元素，利用下标
    let divBox = document.getElementsByTagName('div');
    console.log(divBox);
    console.log(divBox[1]);
    // 把所有的元素都打印出来
    for (let i = 0; i < divBox.length; i++) {
        console.log(divBox[i]);

3.通过类名获得元素，返回一个伪数组

 let divBoxs = document.getElementsByClassName('items');
    console.log(divBoxs);

4.通过name值获取，返回元素节点集合（相当于伪数组）

	let inputs = document.getElementsByName('gender');
    console.log(inputs);
    console.log(Object.prototype.toString.call(inputs));

5.通过选择器名获取元素

document.querySelector:获得满足条件的第一个元素
document.querySelectorAll:获得满足条件的所有元素

<script>
    // 通过选择器名获取元素
    // #box
    // .items
    // 1.document.querySelector--->获得满足条件的第一个元素
    let divBox1 = document.querySelector('#box');
    console.log(divBox1);

    let divBox2 = document.querySelector('.items');
    console.log(divBox2);

    // 2.document.querySelectorAll--->获得满足条件的所有元素
    // let divBoxs = document.querySelectorAll('items');
    // console.log(divBoxs);
    let divBox3 = document.querySelectorAll('div')
    console.log(divBox3);
    let targetA = document.querySelector('.nav .links a');
    console.log(targetA);
</script>

利用点语法设置属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        吃肉不吃蒜，滋味少一半
    </div>
</body>

</html>
<script>
    let divBox = document.getElementById('box');
    // console.log(divBox);
    console.dir(divBox); //将对象展开打印
    // 样式
    // 样式属性值--->字符串
    divBox.style.color = 'pink';
    divBox.style.width = '400px';

    // 注意css属性名带有-，应该去掉，然后首字母大写
    divBox.style.backgroundColor = 'red';
    divBox.style.fontsize = '30px';
    // js设置属性连写
    divBox.style.border = '5px solid blue';
</script>

查询案例：隔行换色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
    </ul>
</body>

</html>
<script>
    // 奇数行红色
    // 偶数行粉色
    // list 是li标签的数组.数组中没有color属性 
    let list = document.querySelectorAll('ul li');
    for (let i = 0; i < list.length; i++) {
        if (i % 2 == 0) {
            list[i].style.color = 'red';
        } else {
            list[i].style.color = 'pink';
        }

    }
</script>

在这里插入图片描述

事件

就是文档或浏览器窗口中发生的一
些特定的交互瞬间。（需要元素执行什么操作）

事件属性：dom对象内置若干on开头的属性，用来保存事件处理函数！
事件触发：当浏览器发现事件触发,就会调用 dom对象相应的事件属性中保存的函数！

事件三要素

事件源 —谁来做
事件类型 —怎么做
事件结果（事件处理函数）—做什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>你来点我啊!</button>
    <ul>
        <li><a href="#">按钮1</a></li>
        <li><a href="#">按钮2</a></li>
        <li><a href="#">按钮3</a></li>
        <li><a href="#">按钮4</a></li>
        <li><a href="#">按钮5</a></li>
        <li><a href="#">按钮6</a></li>
        <li><a href="#">按钮7</a></li>
        <li><a href="#">按钮8</a></li>
    </ul>
    <a href="#">不要控制我</a>
    <script>
        // 事件: 需要元素执行什么操作,称为事件
        // 事件三要素: 
        // 事件源-----谁来做 
        // let btn = document.getElementsByTagName('button')[0];// 拿到的是数组,所以要加下标
        let btn = document.querySelector('button');// 直接拿到元素

        // 事件类型---怎么做 
        // 当元素被点击的时候,执行某个函数
        btn.onclick = function () {
            // 事件结果---做什么
            alert('我,被点击了!!!');
        }


        // 小练习: 控制列表中的a标签,给每个a标签设置点击事件,打印:我学会了
        let aArr = document.querySelectorAll('li a');
        for(let i = 0;i < aArr.length;i++) {
            aArr[i].onclick = function () {
                console.log(this);
                // 谁调用就指向谁
            }
        }
        
    </script>
</body>
</html>

鼠标移入移出事件

tip：当把鼠标移入的时候，先把原来的颜色保存，然后再改吧颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
        <li>奇数</li>
        <li>偶数</li>
    </ul>
    <script>
        let liArr = document.querySelectorAll('li');
        // 用来保存原来颜色的容器
        let oldColor;
        for (let i = 0; i < liArr.length; i++) {
            if (i % 2 == 0) {
                liArr[i].style.backgroundColor = 'red';

            } else {
                liArr[i].style.backgroundColor = 'pink';
            }
        }
        for (let i = 0; i < liArr.length; i++) {
            liArr[i].onmouseover = function () {
                oldColor = this.style.backgroundColor;
                this.style.backgroundColor = 'gold';

            }
            liArr[i].onmouseout = function () {
                this.style.backgroundColor = oldColor;
            }
        }
        // 问题：鼠标移出的时候，恢复原来的颜色
        // 前提：不允许再次判断奇偶数
        // 当把鼠标移入的时候，先把原来的颜色保存，然后再改吧颜色
    </script>
</body>

</html>

在这里插入图片描述

什么是DOM

DOM查询

1.通过id名获得元素，返回一个对象

2.通过标签获得元素，返回一个伪数组

3.通过类名获得元素，返回一个伪数组

4.通过name值获取，返回元素节点集合（相当于伪数组）

5.通过选择器名获取元素

利用点语法设置属性

事件

事件三要素

鼠标移入移出事件

猜你喜欢