DOM以及元素的操作（上）

只会浑

已于 2022-08-20 14:34:16 修改

阅读量151

点赞数

文章标签：前端 javascript html

于 2022-08-20 14:31:31 首次发布

本文链接：https://blog.csdn.net/txl2498459886/article/details/126438450

版权

本文档详细介绍了DOM（文档对象模型）的概念及其在HTML中的应用，包括通过ID、标签名、类名和选择器查找元素，以及通过节点关系进行查找。同时，文章讲解了如何操作元素的内容、属性、类名和行内样式。此外，还提供了添加事件监听器的示例，帮助读者掌握DOM的基本操作技巧。

摘要由CSDN通过智能技术生成

一、什么是DOM

DOM，全称Document Object Model，文档对象模型，用于操作HTML文档。DOM把整个HTML文件看作是一个树形结构，每一个元素就代表一个节点，该树形结构的根不是html标签，而是一个Document对象。

Document对象：不是手动创建的，而是JS解释器自动创建，并且一个页面有且仅有一个document。

作用：通过document能找到页面上的每一个DOM元素/节点。

注意：Document会把页面上的每一个元素、属性、注释等都当做是元素/节点。

二、DOM的基本操作

根据ID查找元素

语法：document.getElementById("id值")

由于id的唯一性，所以通过id获取到的元素也只有一个，即使有多个元素的id相同，也只会找到第一个。

注意：在JS中，元素的id属性的值可以直接当作变量来使用。

<body>
    <div id="div1"></div>
    <script>
        console.log(div1)
    </script>
</body>

根据标签名查找元素

语法：document.getElementsByTagName("标签名")

由于可能会有很多相同的标签，所以通过这种方法获取的元素数量会≥1，即得到的结果是一个数组。但该数组不能使用一般数组的常用方法，只能通过遍历获取其中的每一项。如：数组名.push()等，所以该数组又叫做伪数组。

<body>
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

    <script>
        var lis = document.getElementsByTagName("li");
        console.log(lis)
    </script>
</body>

根据类名进行查找

语法：document.getElementsByClassName("类名")

同样的，最后返回的结果也是一个伪数组。

<body>
    <ul class="ul">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

    <ul class="ul">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

    <script>
        var uls = document.getElementsByClassName("ul");
        console.log(uls)
    </script>
</body>

根据选择器查找

DOM支持通过选择器进行元素的查找，如id选择器，标签选择器，群组选择器，后代/子代选择器等等。

1、通过选择器查找一个：document.querySelector("选择器")，没有则返回null

<body>
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

    <script>
        var li = document.querySelector("ul>li");
        console.log(li) //只会找到ul下面的第一个li
    </script>
</body>

2、通过选择器查找所有：document.querySelectorAll("选择器")，返回的也是一个伪数组。

<body>
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

    <script>
        var li = document.querySelectorAll("ul>li");
        console.log(li) //会找到ul下面的所有li
    </script>
</body>

通过节点关系查找

可以通过节点和节点之间的关系进行查找，如父节点、子节点、兄弟节点等。

常用的有：

查找父节点：元素.parentNode

查找子节点：元素.children---返回的是一个伪数组

查找第一个儿子节点：元素.firstElementChild

查找最后一个儿子节点：元素.lastElementChild

查找前一个兄弟节点：元素.previousElementSibling

查找后一个兄弟节点：元素.nextElementSibling

注意：查找元素不一定非要从document根开始，也可以从某个父元素开始进行查找。

<body>
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

    <script>
        var ul = document.querySelector("ul");
        var lis=ul.getElementsByTagName("li")
        console.log(lis) //会找到ul下的所有li
    </script>
</body>

二、元素的基本操作

操作元素内容

常用的操作元素内容有两个：innerText和innerHTML

获取元素内容：元素.innerText 或者 元素.innerHTML。

设置元素内容：

元素.innerText="新内容"

元素.innerHTML="新内容"

区别：innerText只能支持纯文本的获取和设置，而innerHTML可以支持HTML标签的设置。

var div=document.querySelector("div")

div.innerText="哈哈" //正常显示
div.innerText="<h1>哈哈</h1>" // 在页面上原样显示，不会解析h1标签

div.innerHTML="你好" // 正常显示
div.innerHTML="<h1>哈哈</h1>" //会将h1解析成html标签，然后显示

操作元素属性

1、操作元素原生属性：

获取：元素.属性

设置：元素.属性="新属性值"

2、操作元素自定义属性（也可以原生属性）：

获取：元素.getAttribute("属性名")

设置：元素.setAttribute("属性名","属性值")

删除：元素.removeAttribute("属性名")

操作元素类名

获取：元素.className

设置：元素.className="新类名"

操作元素行内样式

获取：元素.style.样式名

设置：元素.style.样式名="样式值"

在学会DOM的基本操作后，就可以结合之前所学的，给元素绑定事件，如：给元素添加点击事件

<body>
    //添加点击事件方式一，直接在开始标签内添加onclick属性
    <button onclick="函数名或代码">点击</button>

    <script>
        var btn=document.querySelector("button")
        // 添加点击事件方法二，获取元素之后，添加onclick方法,给这个onclick方法赋值一个函数
        btn.onclick=function(){

            函数体
        }
        
    </script>
</body>

补充：在函数中可以使用this关键字来替代当前绑定事件的元素，this本质是一个指针。

var btns = document.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        //这里的this指的就是btns[i]
        if (this.innerText == "C") {
            text.innerText = "";
	    } else if (this.innerText == "=") {
				if (text.innerHTML == "") {
						alert("请输入内容再计算");
				} else {
					// 计算
					text.innerHTML = eval(text.innerHTML);
				}
		} else {
			text.innerHTML += this.innerText;
		}
	};
}

只会浑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM以及元素的操作（上）

DOM，全称Document Object Model，文档对象模型，用于操作HTML文档。DOM把整个HTML文件看作是一个树形结构，每一个元素就代表一个节点，该树形结构的根不是html标签，而是一个Document对象。
复制链接

扫一扫