HTML之JavaScript DOM编程获取元素的方式

             1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素复制

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小标题</title>
    <script>
        /*
        步骤：
            1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素
 
            3.对元素进行操作
                1.操作元素的属性
                2.操作元素的样式
                3.操作元素的文本
                4.增删元素
        */
        function fun1() {
            // 1 获得document
            // 2 通过document获得元素
            var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
            console.log(aaa)
        }
        function fun2() {
            // 根据标签名获取多个元素，返回数组
            var bbb = document.getElementsByTagName("input")
            for (i = 0; i < bbb.length; i++) {
                console.log(bbb[i])
            }
        }
        function fun3() {
            // 根据元素属性名获取元素，返回数组， 循环迭代时慎用for in 会获取到其他的东西
            var ccc = document.getElementsByName("aaa")
            for (i = 0; i < ccc.length; i++) {
                console.log(ccc[i])
            }
        }
        function fun4() {
            // 根据元素class属性名获取元素
            var ddd = document.getElementsByClassName("a")
            for (i = 0; i < ddd.length; i++) {
                console.log(ddd[i])
            }
        }
        function fun5() {
            // 先获取父元素
            var div01 = document.getElementById("div01")
            // 获取所有子元素
            var cs = div01.children // 获取全部子元素
            for (i = 0; i < cs.length; i++) {
                console.log(cs[i])
            }
            console.log(div01.firstElementChild)// 通过父元素获取第一个子元素
            console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
        }
        // 通过子元素获取父元素
        function fun6() {
            // 获取子元素
            var mmm = document.getElementById("username")
            console.log(mmm.parentElement) // 通过子元素获取父元素
        }
        // 通过当前元素获取兄弟元素
        function fun7() {
            var nnn = document.getElementById("username")
            console.log(nnn.previousElementSibling) // 获取前面的第一个元素
            console.log(nnn.nextElementSibling) // 获取后面的第一个元素
        }
    </script>
</head>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa" />
        <input type="text" class="b" id="password" name="aaa" />
        <input type="text" class="a" id="email" />
        <input type="text" class="b" id="address" />
    </div>
    <input type="text" />
    <hr>
    <input type="button" value="根据id获得指定元素" onclick="fun1()" id="btn01" />
    <input type="button" value="根据标签名获得多个元素" onclick="fun2()" id="btn02" />
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03" />
    <input type="button" value="根据class属性获取多个值" onclick="fun4()" id="btn04" />
    <hr>
    <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" />
    <input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" />
    <input type="button" value="通过当前元素获取前面的兄弟元素" onclick="fun7()" id="btn07" />
    <input type="button" value="通过当前元素获取后面的兄弟元素" onclick="fun8()" id="btn08" />
</body>
</html>复制

HTML之JavaScript DOM编程获取元素的方式

HTML之JavaScript DOM编程获取元素的方式

HTML之JavaScript DOM编程获取元素的方式

jQuery学习（一）

HTML CSS JS Jquery 练手项目

Bootstrap和jQuery开发案例

JQuery高级操作详解

jQuery操作（删除内容）

使用 jQuery 创建带验证功能的自定义日期选择器

jQuery get 方法内操控vue变量（异步ajax请求方法中操控双向绑定的响应式变量）实现异步请求函数内完成变量的双向响应式绑定

jQuery 从入门到精通：全面解析与实战指南

echarts 折线图上只显示某一个点值

前端哥

C/C | 每日一练 (2)

Linux性能监控工具汇总

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码数据库文档)

DeepSeek 提示词：定义、作用、分类与设计原则

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

Python常见面试题的详解16

Docker实战-使用docker compose搭建博客

QQ登录测试用例报告

乐享数科：供应链金融—三个不同阶段的融资模式

【Deepseek】Linux 本地部署 Deepseek

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000

3
CSS常用属性（文本属性）

2024-11-04 09:11:111000

4
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

5
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

6
vue使用datav echarts

2024-09-06 00:09:381000

7
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

8
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

9
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

10
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

	1.获得document DOM树
	window.document(是window的属性)
	2.从document中获取要操作的元素
	1.直接获取
	var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
	var bbb = document.getElementsByTagName("input")
	var ccc = document.getElementsByName("aaa")
	var ddd = document.getElementsByClassName("a")
	2.间接获取
	var cs = div01.children // 获取全部子元素
	var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
	var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
	var parentE = mmm.parentElement // 通过子元素获取父元素
	var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
	var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>小标题</title>
	<script>
	/*
	步骤：
	1.获得document DOM树
	window.document(是window的属性)
	2.从document中获取要操作的元素
	1.直接获取
	var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
	var bbb = document.getElementsByTagName("input")
	var ccc = document.getElementsByName("aaa")
	var ddd = document.getElementsByClassName("a")
	2.间接获取
	var cs = div01.children // 获取全部子元素
	var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
	var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
	var parentE = mmm.parentElement // 通过子元素获取父元素
	var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
	var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

	3.对元素进行操作
	1.操作元素的属性
	2.操作元素的样式
	3.操作元素的文本
	4.增删元素
	*/
	function fun1() {
	// 1 获得document
	// 2 通过document获得元素
	var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
	console.log(aaa)
	}
	function fun2() {
	// 根据标签名获取多个元素，返回数组
	var bbb = document.getElementsByTagName("input")
	for (i = 0; i < bbb.length; i++) {
	console.log(bbb[i])
	}
	}
	function fun3() {
	// 根据元素属性名获取元素，返回数组，循环迭代时慎用for in 会获取到其他的东西
	var ccc = document.getElementsByName("aaa")
	for (i = 0; i < ccc.length; i++) {
	console.log(ccc[i])
	}
	}
	function fun4() {
	// 根据元素class属性名获取元素
	var ddd = document.getElementsByClassName("a")
	for (i = 0; i < ddd.length; i++) {
	console.log(ddd[i])
	}
	}
	function fun5() {
	// 先获取父元素
	var div01 = document.getElementById("div01")
	// 获取所有子元素
	var cs = div01.children // 获取全部子元素
	for (i = 0; i < cs.length; i++) {
	console.log(cs[i])
	}
	console.log(div01.firstElementChild)// 通过父元素获取第一个子元素
	console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
	}
	// 通过子元素获取父元素
	function fun6() {
	// 获取子元素
	var mmm = document.getElementById("username")
	console.log(mmm.parentElement) // 通过子元素获取父元素
	}
	// 通过当前元素获取兄弟元素
	function fun7() {
	var nnn = document.getElementById("username")
	console.log(nnn.previousElementSibling) // 获取前面的第一个元素
	console.log(nnn.nextElementSibling) // 获取后面的第一个元素
	}
	</script>
	</head>
	<body>
	<div id="div01">
	<input type="text" class="a" id="username" name="aaa" />
	<input type="text" class="b" id="password" name="aaa" />
	<input type="text" class="a" id="email" />
	<input type="text" class="b" id="address" />
	</div>
	<input type="text" />
	<hr>
	<input type="button" value="根据id获得指定元素" onclick="fun1()" id="btn01" />
	<input type="button" value="根据标签名获得多个元素" onclick="fun2()" id="btn02" />
	<input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03" />
	<input type="button" value="根据class属性获取多个值" onclick="fun4()" id="btn04" />
	<hr>
	<input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" />
	<input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" />
	<input type="button" value="通过当前元素获取前面的兄弟元素" onclick="fun7()" id="btn07" />
	<input type="button" value="通过当前元素获取后面的兄弟元素" onclick="fun8()" id="btn08" />
	</body>
	</html>

HTML之JavaScript DOM编程获取元素的方式

HTML之JavaScript DOM编程获取元素的方式

微信扫一扫：分享