Document Object Mode （DOM）

最新推荐文章于 2024-08-15 08:55:57 发布

李花花12138

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量129

点赞数

文章标签： javascript 开发语言 ecmascript html

本文链接：https://blog.csdn.net/qq_62230186/article/details/124849306

版权

DOM定义了表示和修改文档所需的方法。

1、document对象常用的获取元素方法

<script>
document.getElementById();//通过id获取节点
document.getElementByTagName();//通过标签名获取节点列表（类似数组集合）
document.getElementByClassName();//通过class名获取节点（类似数组集合）
document.getElementByName();//通过名称获得节点（类似数组节点列表）

document.querySelector();//通过css选择器获得节点
document.querySelectorAll();//通过css选择器获得节点列表
</script>

2、节点的遍历

for循环遍历

<div>
	<p>奇酷1</p>
	<p>奇酷2</p>
	<p>奇酷3</p>
	<p>奇酷4</p>
	<p>奇酷5</p>
</div>
<script>
var ps = document.getElementsByTagName("p");
for(var i = 0;i < ps.length;i ++){
 console.log(ps[i],ps[i].innerText);
}
</script>

转换为数组后用forEach遍历

<div>
	<p>奇酷1</p>
	<p>奇酷2</p>
	<p>奇酷3</p>
	<p>奇酷4</p>
	<p>奇酷5</p>
</div>
<script>
var ps = document.getElementByTagName("p");
var arr = Array.from(ps);//转换为数组
arr.forEach(function(elem){
 console.log(elem,elem.innerText);
})
</script>

转换为数组后用for of遍历

<div>
	<p>奇酷1</p>
	<p>奇酷2</p>
	<p>奇酷3</p>
	<p>奇酷4</p>
	<p>奇酷5</p>
</div>
<script>
var ps = document.querySelectorAll("div p");
for(item of ps){
    console.log(item);
}
</script>

3、更改层内容

//更改层内容
<button type="button" onclick="changeIt()">更改层内容</button>
<div>
	我喜欢王者荣耀
</div> 
<script>
function changeIt(){
var div = document.querySelector("div"); 
div.innerText = "不，我喜欢你";//修改div的内容文本 innerText获取/设置元素文本内容（除HTML标签）
div.innerHTML = "<b>不</b>，我喜欢你";//innerHTML获取/设置元素的html内容
}
//更改文本框内容
<input type="text" value="人生苦短" />
<button type="button" onclick="changeInp()">改变文本框内容</button>
function changeInp(){
var input = document.querySelector("input");
input.value = "学前端，月入过万！";
}
</script>

4、获取表单值实例

<input type="text" name="season" value="春" />
<input type="text" name="season" value="夏" />
<input type="text" name="season" value="秋" />
<input type="text" name="season" value="冬" /><br/>
<input type="button" value="显示input内容" onclick="showInput()" />
<input type="button" value="显示season内容" onclick="shoeSeason()"/>
<div id="tip"></div>
<script>
		function showInput(){
		  var str = "";//存储每个input里面的值
		  var inps = document.querySelectorAll("input");//获取所有input节点
		  inps.forEach(function(item){//遍历inps，把value追加到str里面
				str += item.value + "<br/>";
		})
		var tip = document.getElementById("tip");//获得tip节点
		tip.innerHTML = str;//设置tip的html内容
		}
		function shoeSeason(){
		  var str = "";//存储每个season的值
		  var season = document.getElementsByName("season");//获取所有季节（season）
		  season.forEach(function(item){//遍历season
				str += item.value + "<br/>";//累加每个input的值
						
		  })
		var tip = document.getElementById("tip");
	    tip.innerHTML = str;//设置tip的文本
	    }
</script>

5、修改style样式

<style type="text/css">
		#div {
			height: 200px;
			border: 1px solid black;
		}
	</style>
	<body>
		<div id="div" style="width: 200px;">
			样式修改
		</div>
		<button type="button" onclick="changeW()">变宽</button>
		<script type="text/javascript">
			function changeW(){
				var div = document.getElementById("div");//获取div
				div.style.width = "400px";//修改div样式，相当于用js写了行内样式
				div.style.fontSize = "40px";//font-size写法改成驼峰式:fontSize
			}
		</script>
	</body>

6、修改元素的显示与隐藏

<style type="text/css">
		#div {
			
			height: 200px;
			border: 1px solid black;
		}
	</style>
	<body>
		<div id="div" style="width: 400px;";>
			学前端月薪过万！
		</div>
		<button type="button" onclick="toggle()">切换</button>//通过单击按钮实现div的切换与显示
		<script type="text/javascript">
			function toggle() {
				var div = document.getElementById("div");//先获取div
				// var display = div.style.display;//获取到display的值（第一次默认获取不到）
				// if (display !== "none"){//如果不是为none
				// 	div.style.display = "none";//隐藏
				// }else{
				// 	div.style.display = "block";//其他的显示
				// }
				alert(div.style.width);//如果是行内样式可以访问到
				alert(div.style.height);//写在style标签里的样式是访问不到的
			}
		</script>
	</body>

7、通过classList修改类名，修改样式

<style type="text/css">
		#div {
			
			height: 200px;
			border: 1px solid black;
		}
		.hidden{
			display: none;
		}
	</style>
	<body>
		<div id="div" style="width: 400px;";>
			学前端月薪过万！
		</div>
		<button type="button" onclick="toggle()">切换</button> //通过单击按钮实现div的切换与显示
		<script>
			function toggle() {
				var div = document.getElementById("div");//先获取div
				div.classList.toggle("hidden");//切换类名，如果div的类列表里有hidden，移除hidden，没有添加hidden
				//classList.add()添加类名
				//classList.remove()移除类名
				//classList.contains()检查是否包含
			}
		</script>
	</body>

8、一级以上下拉菜单实例

<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			list-style: none;
			text-decoration: none;
		}
		.nav {
			background-color: #CCCCCC;
			height: 100px;
			text-align: center;
		}
		.nav>li {
			float: left;
			width: 100px;
			height: 100%;
			line-height: 100px;
		}
		.nav>li:hover,.nav2>li:hover {
			background-color: #0D6F67;
		}
		.nav .nav2 {
			display: none;
		}
		.link {
			position: relative;
		}
		.nav2 .nav2 {
			position: absolute;
			width: 100px;
			left: 100px;
			top: 0;
		}
	</style>
	<body>
		<ul class="nav">
			<li class="link"><a href="">首页</a></li>
			<li class="link">
				<a href="">产品</a>
				<ul class="nav2">
					<li>数据1</li>
					<li class="link">
						数据2
						<ul class="nav2">
							<li>数据1-1</li>
							<li>数据2-1</li>
							<li>数据3-1</li>
						</ul>
					</li>
					<li>数据3</li>
				</ul>
			</li>
		</ul>
		<script>
			var links = document.querySelectorAll(".link");//获得到所有link菜单
			links.forEach(function(item){//对link进行遍历，item就是link里的子内容
				var nav2 = item.querySelector(".nav2");//获得到link（item）的子节点nav2
				item.onmouseover = function(){//当鼠标移入link（item）时，执行function
					nav2.style.display = "block";//让其子节点 nav2显示
				}
				item.onmouseout = function(){//当鼠标移出link（item）时，执行function
					nav2.style.display = "none";//让其子节点 nav2隐藏
				}
			})
		</script>
	</body>

9、实现全选实例

<h1>全选</h1>
		<input type="checkbox" id="all" /> 全选 <br />
		<input type="checkbox" />选项1
		<input type="checkbox" />选项2
		<input type="checkbox" />选项3
		<input type="checkbox" />选项4
		<script>
			var all = document.getElementById("all"); //获取all
			var checks = document.querySelectorAll("input:not(#all)"); //获取非all的所有元素
			all.onchange = function() { //all在触发时执行function，onchange事件当表单发生时候触发
				checks.forEach(function(item) { //遍历checks
					item.checked = all.checked; //设置元素的checked值为 all的checked值
					//checked为true元素选中 checked值为false 元素不选中
				})
			}
			//监听checks每个input，当发生变化时，计算已经选中的个数
			//如果选中的个数等于checks长度，要设置全选
			checks.forEach(function(item) {
				item.onchange = function() {
					var sel = document.querySelectorAll("input:not(#all):checked") //获取已经选中的checkbox
					if (sel.length === checks.length) { //如果选中的长度等于checks的长度
						all.checked = true;
					} else {
						all.checked = false;
					}
				}
			})
		</script>

李花花12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Document Object Mode （DOM）

DOM定义了表示和修改文档所需的方法。1、document对象常用的获取元素方法<script>document.getElementById();//通过id获取节点document.getElementByTagName();//通过标签名获取节点列表（类似数组集合）document.getElementByClassName();//通过class名获取节点（类似数组集合）document.getElementByName();//通过名称获得节点（类似数组节点列表）
复制链接

扫一扫