DOM案例

最新推荐文章于 2023-09-17 22:28:46 发布

原创最新推荐文章于 2023-09-17 22:28:46 发布 · 479 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

js 同时被 2 个专栏收录

25 篇文章

订阅专栏

笔记

15 篇文章

订阅专栏

本文档介绍了DOM的基本概念，包括文档、元素和节点的定义，并提供了两个DOM操作的案例，分别是表单的全选取消和通过按钮获取文本框信息。此外，详细讲解了DOM中的父子和兄弟关系查询方法，如parentNode、childNodes、firstChild等属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，机构和样式。

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：页面中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM把以上内容都看做是对象

以下我们来介绍几个DOM小案例：

案例一:

表单的全选取消for循环方法：
css部分：

table{
				width: 300px;
				height: 200px;
				text-align: center;
				margin: 100px auto;
				border-collapse: collapse;
			}
			th{
				height: 50px;
				border: 1px solid ghostwhite;
				background-color: cornflowerblue;
			}
			td{
				height: 50px;
				border: 1px solid ghostwhite;
				background-color: #CCCCCC;
			}

html部分：

<div class="wrap">
			<table>
				<thead>
					<tr>
						<th>
							<input type="checkbox" id="j_cbAll" checked="checked"/>
						</th>
						<th>商品</th>
						<th>价格</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>iphone</td>
						<td>5400</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>华为</td>
						<td>4900</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" />
						</td>
						<td>小米</td>
						<td>3999</td>
					</tr>
				</tbody>
			</table>
		</div>

js部分：

<script>
			var j_cbAll = document.getElementById("j_cbAll");   //全选按钮
			var j_tb = document.getElementById("j_tb").getElementsByTagName("input"); //下面所有的复选框
			
			j_cbAll.onclick = function() {
				//this.checked它可以得到当前复选框d的选中状态，如果是true就选中，如果是false就s是未选中
				for (var i = 0; i<j_tb.length; i++ ) {
					j_tb[i].checked = this.checked;
				}
			}
			
			//2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定
			//点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果
			//有一个没有选中，上面全选就不选中
			
			//给三个元素添加点击事件
			for (var i =0 ; i<j_tb.length; i++) {
				j_tb[i].onclick = function () {
					//flag控制全选按钮是否选中
					var flag = true;
					//每次点击下面的复选框都要循环检查3个小按钮是否全部被选中
					for (var i = 0; i < j_tb.length;i++) {
						if (!j_tb[i].checked) {
							flag = false;
							break;
						}
					}
					j_cbAll.checked = flag;
				}
			}
		</script>

在js执行过程中介绍了每个步骤执行的思路；

案例二：

通过点击按钮获取文本框中的信息
html：

<body>

    用户名称：<input type="text" name="username" id="username"/><br />
    用户密码：<input type="password" name="password" id="password" /><br />
    用户密码2：<input type="password" name="password" id="password2" /><br />
    
    <hr />
    <input type="button" value="通过ID获取节点的值" onclick="demo1()"/>
    <input type="button" value="通过NAME获取节点的值"  onclick="demo2()" />
    <input type="button" value="通过TAG获取节点的值" onclick="demo3()" />        
    
    <hr  />
    <p id="pid"><font color="red">获取P标签中的文字</font></p>
    <input type="button" value="获取P中文字" onclick="demo4()" />
    
</body>

js部分：

<script type="text/javascript">
        function demo1()
        {
        //根据id获取元素
        var username=document.getElementById("username");
        //获取节点对象身上的值
        console.log(username.value);
        }
        function demo2()
         {   
         //根据name获取元素
        var password=document.getElementsByName("password");//这是个数组变量
        //获取每个节点中的值
        for(var i=0;i<password.length;i++)
        console.log(password[i].value);
        }
         
         function demo3()
         {   
         //根据元素名称获取元素
        var input=document.getElementsByTagName("input");
        //获取每个节点中的值
        for(var i=0;i<input.length;i++)
        console.log(input[i].value);
        }
         function demo4()
         {
             //获取p元素
             var pid=document.getElementById("pid");
             //获取p元素中的文字
             console.log(pid.innerText);//获取P标签中的文字
             //获取p元素中的html内容
             console.log(pid.innerHTML);//<font color="red">获取P标签中的文字</font>
             pid.innerHTML="<font color='aqua'>新的p</font>"
         }
    </script>

这里讲述了两个基础案例
这里我在补充一下知识点：

获取DOM节点

父子关系查询

node

父子关系查询
1.node.parentNode:呼获取node的父节点（元素，文档）

document.body.parentNode;//html
document.body.parentNode.parentNode; //document
document.body.parentNode.parentNode.parentNode; //null

2.node.childNodes:获得node的所有直接子节点，包括空格（text）
3.node.firstChild:获得node下的第一个子节点
4.node.lastChild:获得node下得最后一个子节点

兄弟关系
1.node.previousSibling:返回当前节点的前一个兄弟节点
在这里插入图片描述

2.node.nextSibling:返回当前节点的下一份兄弟节点

element

父子关系查询
1.element.parentElement:返回父元素对象
2.element.children:返回子元素对象的集合 IE8支持
在这里插入图片描述
3.element.firstElementChild:返回元素的第一个子元素对象
4.element.lastElementChild:返回元素的最后一个元素对象