DOM对象

最新推荐文章于 2024-07-16 19:32:16 发布

Chenche_

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量376

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Chenche_/article/details/127577013

版权

DOM知识点；

1；什么是DOM；

DOcument Object Model:文档对象模型

2 DOM的核心；document对象，

3 DOM的作用；

可以访问和操作XML和HTML文档中的标签、属性、节点的属性和方法，

4；在DOM中将整个HTML文档看做是一个倒立的树(树状结构)；一个HTML页面就是一个DOM对象，是一棵DOM HTML树

（1）DOM HTML树的节点 html

(2)元素（Element）；html文档中的标签

（3）节点（Node）：html文档中的内容

5；DOM树里面节点分类；

（1）标签节点；html里面所有标签

（2）属性节点；标签的属性.....内置标签、自定义属性

(3) 文本节点；标签中的文本、换行空格等

（4）注释节点；<！--注释内容-->

6、节点概念

（1）根节点；根节点是HTML、有且只能有一个。

（2）子节点；某个节点的下一级节点，

（3）父节点；某个节点的上一个节点，

（4）兄弟节点；拥有相同父节点的节点，称之为兄弟节点

通过document对象来操作html页面里面的元素

1、getElemenByld("id 属性值")：通过标签的id属性来获取标签

2、getElemenByName（"name属性值"）；通过标签name获取属性返回值是NodeList

3、getElemenByTagName （"标签名"）通过标签名获取标签。返回值类型是HTMLCollection

4、getElemenByClassName（"class属性值"）通过标签的class属性获取标签，返回值类型是HTMLCollection

5、querSelector('#id属性值');返回一个id属性值属性值的标签

querSelector('.class属性值')：返回第一个class的属性值的标签。

6、 querSelectorAll('.标签名')返回第一个指定标签名的标签：返回值是NodeList

document对象属性

1、document.body:返回文档的body元素·

在

2、document.documentElement;返回文档的html元素

3、document. 返回文档的form（表单）对象

练习一

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .ok {
        color: green;
    }

    .fail {
        color: red;
    }
</style>

<body>
</body>
<div class="longin">
    <label>
        用户名： <input type="text" id="usear">
        <span  id="msg"></span>
    </label>
    <br><br>

    <button id="btn_check">验证</button>
</div>
<script>
    let check = document.getElementById('btn_check')
    check.addEventListener('click', function () {
        // 1 获取input的vaule
        let uname = document.getElementById('usear').value
        //   2 对用户名进行判断
        if (uname === 'aaa') {
            document.getElementById('msg').innerText = '用户名验证通过'
            document.getElementById('msg').setAttribute('class', 'ok')
        }
        else {
            document.getElementById('msg').innerText = '用户名验证失败'
            document.getElementById('msg').setAttribute('class', 'fail')
        }
    })
</script>

</html>

练习二

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .but {
        color: blue;
        font-size: 20px;
    }

    .dd {
        color: red;
        font-size: 25px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
</style>

<body>
    <div id="d1" class="but" name="mydiv" title="woniu">
        蜗牛学苑
    </div>
    <button id="bth">更改样式</button>
    <script>
        let bth_font = document.getElementById("bth")
        bth_font.addEventListener('click', function () {
            // 更改CSS样式
            document.getElementById('d1').setAttribute('class', 'dd')
            document.getElementById('d1').innerText = '北京大学'

        })
    </script>
</body>

</html>