No.34 JavaScript---DOM

一、DOM概述

DOM 是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作(比如对元素增删内容)。
浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOMTree)。所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM不是JavaScript 语法的一部分，但是DOM 操作是JavaScript最常见的任务，离开了 DOM,JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。

1.1 节点

DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树)，就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点类型：

1.2 节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构倒过来就像一棵树。
浏览器原生提供document节点，代表整个文档。
除了根节点，其他节点都有三种层级关系。

1.3 document.nodeType 属性

二、document对象方法——获取元素

2.1 document.getElementsByTagName() (H5)

document.getElementsByTagName 方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象(HTMLcolection 实例)，可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集.

<body>
    <div>hahha</div>
    <script>
        var divs = document.getElementsByTagName('div')
        
    </script>
</body>

如果传入*，就可以返回文档中所有 HTML 元素.

<body>
    <div>hahha</div>
    <script>
        var divs = document.getElementsByTagName('*') // 没啥用
        
    </script>
</body>

2.2 document.getElementsByClassName() (H5)

document.getElementsByClassName 方法返回一个类似数组的对象(HTMLcolection 实例)，包括了所有 class 名字符合指定条件的元素，元素的变化实时反映在返回结果中。

var elements = document.getElementsByClassName(names)

由于 class 是保留字，所以JavaScript 一律使用 className 表示 CSS 的 class。
参数可以是多个 class，它们之间使用空格分隔。

<body>

    <p class="text">hha</p>
    <script>
        var texts = document.getElementsByClassName('text')[0];
        console.log(texts);
        
        texts.innerHTML = "hello world"
        
    </script>
</body>

2.3 document.getElementsByName() 使用率低 (H5)

<body>
    <form name="login"></form>
    <script>
        var name1 = document.getElementsByName('login');
        console.log(name1);
        
    </script>
</body>

2.4 document.getElementById() 常使用 (H5)

反回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回 null.

<body>
    <div id="root">hahhha</div>
    <script>
        var root = document.getElementById('root');
        console.log(root);
        
    </script>
</body>

2.5 document.querySelector()

document.querySelector 方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null.

<body>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script>
        var nav = document.querySelector(".nav");
        console.log(nav);
        
    </script>
</body>

2.6 document.querySelectorAll()

document.queryselectorAll方法与 queryselector 用法类似，区别是返回一个 Nodelist对象，包含所有匹配给定选择器的。

<body>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script>
        var navs = document.querySelectorAll(".nav");
        console.log(navs);
        
    </script>
</body>

三、document对象方法——创建元素

3.1 document.createElement()

document.createElement方法用来生成元素节点，并返回该节点。

<body>
    <script>
        var text = document.createElement("p");
        console.log(text)
        
    </script>
</body>

3.2 document.createTextNode()

document.createTextNode 方法用来生成文本节点(Text 实例)，并返回该节点。

<body>
    <script>
        var text = document.createElement("p");
        var content = document.createTextNode("hahh")
        text.appendChild(content)
        console.log(text)
        
    </script>
</body>

3.3 document.createAttribute()

<body>

var text = document.createElement("p");

var content = document.createTextNode("hahh")

//将文本内容放到P标签

text.appendChild(content)

var id = document.createAttribute("id")

//给 id 赋值

id.value = "name"

//将id属性添加到P标签

text.setAttributeNode(id)

console.log(text)

//放到网页中

var container = document.getElementById("container")

container.appendChild(text)

</script>

</body>

posted @ 2025-03-06 10:24 百里屠苏top 阅读(36) 评论(0) 收藏举报

刷新页面返回顶部