【内置浏览器对象】

最新推荐文章于 2024-06-05 11:07:30 发布

敲代码找小姚

最新推荐文章于 2024-06-05 11:07:30 发布

阅读量78

点赞数

文章标签： javascript java 前端

本文链接：https://blog.csdn.net/m0_64529999/article/details/127080216

版权

Dom的核心对象就是document对象

document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

getElementById() 通过id获取元素

getElementsByTayName(): 通过元素名获取元素，得到一组标签

getElementByName(): 通过标签的name属性的值来获取标签，得到的也是一组元素

getElementsByclassName("sp"): 获取到应用了class且值为sp的所以标签

querySelector():通过选择器获取标签，得到的是单个标签

querySelectorAll():通过选择器获取标签，获取的是满足条件的所有标签添加

appendChild():给某个标签添加子元素

firstElementChild：删除某元素中第一个子元素

lastElementChild: 删除某元素中最后一个子元素

removeChild():删除的是子元素

remove()：清空某元素中所有子元素，包括该元素本身

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div1
		</div>
		<div id="div3">
			这是div1
		</div>
		<div id="div4">
			这是div1
		</div>
		<div id="div5">
			这是div1
		</div>
		<div id="div6">
			这是div1
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
		</ul>
		<span class="sp">
			这是一个span标签
		</span>
		<p class="sp"></p>
		<input type="text" name="uname" value=""/>
		<script type="text/javascript">
			var div_1=document.getElementById("div1")
			var div_2=document.getElementById("div2")
			
			var divs=document.getElementsByTagName("div")
			
			for(var i=0;i<divs.length;i++){
				console.log(divs[i])
			}
			var radios=document.getElementsByTagName("sex")
			// console.log(radios)
			for(var i=0;i<radios.length;i++){
				console.log(radios[i])
			}
			var result=document.getElementsByClassName("sp")
			console.log(result)
			var ul=document.querySelector("ul")
			console.log(ul)
			
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				width: 300px;
				list-style: none;
			}
			ul li{
				border: 1px solid red;
padding: 10px 20px;
margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<input type="text" name="txt" id="txt" value="" />
		<input type="text" name="txt1" id="txt1" value="" />
		<input type="button" value="添加节点" onclick="add()">&nbsp;
			<input type="button" value="删除节点" onclick="del()">&nbsp;
		<input type="button" value="修改节点" onclick="update()">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<script type="text/javascript">
			function add(){
				//
				var key=document.getElementById("txt").value
				//
				var li=document.createElement("li")
				//
				li.innerHTML=key
				//
				document.querySelector("ul").appendChild(li)
			}
			function del(){
				var ul_l=document.querySelector("ul")
				//
				//
				//
				//
				//
				ul_l.remove()
			}
			function update(){
				var ul_l=document.querySelector("ul")
				var li=ul_l.lastElementChild
				li.innerHTML="更新后的"
			}
		</script>
	</body>
</html>