【DOM】思维导图、知识梳理

最新推荐文章于 2024-01-30 15:15:22 发布

淡漠爱清凉

最新推荐文章于 2024-01-30 15:15:22 发布

阅读量541

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Mr_115/article/details/127707752

版权

思维导图

知识梳理

一、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）标签节点：所有的标签

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

（3）文本节点：标签中的文本、换行、空格等

（4）注释节点：

6、基本概念：

（1）根节点：根节点是html，有且只能有一个

（2）字节点：某个节点的下一级节点

（3）父节点：某个节点的上一级节点

（4）兄弟节点：拥有相同父节点的节点

        let div=document.getElementById('dt')
        console.log(div)
        console.log(div.__proto__)  //__proto__:表示元素的原型

二、通过document对象来操作html页面中的元素

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

2、getElementByName("name属性值")：通过标签name属性获取标签，返回值的类型是NodeList

3、getElementByTagName("标签名")：通过标签名获取标签，返回值的类型是HTMLCollenction

4、getElementByClassName("class属性值")：通过标签class属性获取标签，返回值的类型是HTMLCollenction

5、querySelectior('#id属性值')：返回一个指定id属性值的标签

querySelectior('.class属性值')：返回第一个指定class属性值的标签

querySelectior('标签名')：返回第一个指定标签名的标签

6、querySelectiorAll('.class属性值')：返回所有指定class属性值的标签。返回值的类型是NodeList

三、document对象的属性

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

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

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

四、Element对象的属性和方法：在JavaScript代码中使用html的标签（Eltment）属性和方法

children属性：用来获取某个元素的子元素

强调：HTMLCollection和NodelList的区别：

（1）HTMLCollection：通过document对象或Element对象调用getElementsByClassName()方法、 getElementsByTagName()方法、children属性等返回的对象集。

（2）NodeList: document对象调用getElementsByNamel())方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

（3）HTMLCollection对象用于元素操作

（4）NodeList对象用于节点操作

五、元素的属性和方法

1、属性：

（1）innerHTML：设置和返回起始标签和结束标签之间的html（包括标签）

（2）innerText：设置和返回起始标签和结束标签之间的文本（不能解析标签---不识别标签）

（3）textContent：设置或返回指定节点的文本内容（不识别换行）

2、方法：

（1）document.write("html内容")：在文档中写入指定的内容

（2）document.writeln("html内容")：向文档写入指定的内容后并换行

六、标签的属性

1、attributes：返回标签的所有属性集合

2、aetAttributes(name,value)：设置标签的属性值。参数name表示属性名，参数value表示属性值

<style>
    .dt {
        color: red;
        font-size: 25px;
    }

    .dd {
        color: blue;
        font-size: 35px;
    }
</style>

<body>
    <div id="d1" class="dt" name="mydiv" title="">
        北京大学
    </div>
    <button id="btn">更改文字</button>
    <script>
        let btn_font = document.getElementById('btn')
        btn_font.addEventListener('click', function () {
            
                document.getElementById('d1').setAttribute('class', 'dd')
        })
    </script>

练习：对input中输入的用户名进行验证，当用户名合法时在input后显示“用户名正确”，否则显示“用户名错误”

<style>
    .ok{
        color: green;
    }
    .fail{
        color:

最低0.47元/天解锁文章

淡漠爱清凉

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【DOM】思维导图、知识梳理

【DOM】思维导图、知识梳理
复制链接

扫一扫

【DOM】思维导图、知识梳理

思维导图

知识梳理

“相关推荐”对你有帮助么？