DOM

javascript 的组成部分

DOM (document object model) 文档对象模型
BOM (browers object model) 浏览器对象模型
ECMAScript js 的核心

DOM树

在这里插入图片描述
我们可以打印“console.log(document)”看看：

DOM 节点

节点分类
- 元素节点：每个 HTML元素
  - 属性节点：HTML元素的属性
- 文本节点：HTML元素内的文本
  - 注释节点：注释
- 文档节点：整个文档document

<!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 id="list">
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
    <!-- html注释 -->
    <li>
        <span>span1</span>
        <span>span2</span>
    </li>
</ul>
<script>
{
    console.log(document.childNodes);
    let list = document.querySelector("#list");
    console.log(list.childNodes);
}
</script>
</body>
</html>

html元素节点：html
li元素节点：li
文本节点：text
注释节点：comment
　　疑问：为啥有这么多text节点？
在这里插入图片描述
　　我们可以删除三个“换行”试试：

<ul id="list">
    <li>第1个li</li><li>第2个li</li><li>第3个li</li><li>第4个li</li>
    <!-- html注释 -->
    <li>
        <span>span1</span>
        <span>span2</span>
    </li>
</ul>

会发现删除三个换行，list下少了3个text节点，相信应该明白了吧！其实“换行”在文档解析的时候，解析成空格或者空白符，其实这些东西实际也是节点，只不过划分在文本节点里了。
　　溜_x_i_a_o_迪童鞋认为其实html上所有的东西都是DOM树上的节点。
在这里插入图片描述

节点类型 — nodeType
- 元素节点：1
  - 属性节点：2
- 文本节点：3
  - 注释节点：8
- 文档节点：9

    //console.log(document.childNodes);
    let list = document.querySelector("#list");
    //console.log(list.childNodes);

    // 节点类型
    document.childNodes.forEach(item => {
        console.log("document:",item,item.nodeType);
        // 10 文档声明
        // 1 元素节点
    });
    list.childNodes.forEach(item => {
        console.log("list:",item,item.nodeType);
        // 3 文本节点
        // 8 注释节点
    });

在这里插入图片描述
溜_x_i_a_o_迪童鞋在让好奇的大家伙看一下节点名称。

    //console.log(document.childNodes);
    let list = document.querySelector("#list");
    //console.log(list.childNodes);

    // 节点类型
    document.childNodes.forEach(item => {
        console.log("document:",item,item.nodeType,item.nodeName);
        // 10 文档声明
        // 1 元素节点
    });
    list.childNodes.forEach(item => {
        console.log("list:",item,item.nodeType,item.nodeName);
        // 3 文本节点
        // 8 注释节点
    });

在这里插入图片描述

节点名称 — nodeName
- 元素节点：与标签名相同
- 文本节点：为#text
- 注释节点：为#comment
- 文档节点：为#document

溜_x_i_a_o_迪童鞋再次小结：
节点类型
1 　元素节点（标签名称）
3 　文本节点 (#text)
8 　注释节点 (#comment)
9 　document (#document)
10 　文档声明 (html)

溜_x_i_a_o_迪

发布了34 篇原创文章 · 获赞 12 · 访问量 2531

私信关注

DOM学习实用路线（1）——DOM简介及DOM节点介绍

DOM

javascript 的组成部分

DOM树

DOM 节点

猜你喜欢