JavaScript——dom基本操作

最新推荐文章于 2022-01-11 20:33:18 发布

Regina_Wan

最新推荐文章于 2022-01-11 20:33:18 发布

阅读量258

点赞数

分类专栏： javascript 文章标签： JavaScript Dom操作

本文链接：https://blog.csdn.net/Yun_Ge/article/details/89060813

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、dom基本操作（Document Object Model）文档对象模型
查找 HTML 元素的4中方式

<html
<head>
<title>test</title>
<style>
		#div1{
			width: 200px;
			height: 300px;
			position: absolute;
			left: 400px;
			top: 500px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div class="div2"></div>
	<div class="div2"></div>
	<div name="div3"></div>
	<div name="div3"></div>
</body>
<script>
	//第一种，通过id获取
	var oDiv1 = document.getElementById('div1');
	alert(oDiv1);//得到的是一个对象
	//第二种，通过classname获取
	var aDiv2 = document.getElementsByClassName('div2');
	alert(aDiv2);//得到的是一个数组集合，
	alert(aDiv2[0]);//可以得到具体对象
	//第三种，通过name获取
	var aDiv3 = document.getElementsByName('div3');
	alert(aDiv3);//得到的是一个结点集合，
	alert(aDiv3[0]);//可以得到具体对象
	//第四种，通过tagname获取
	var aDiv = document.getElementsByTagName('div');
	alert(aDiv);//得到的是一个数组集合，
	alert(aDiv[0]);//可以得到具体对象
</script>
</html>

其他操作：

	alert(document.title);//得到标题
	alert(document.body);//得到body结点，[object HTMLBodyElement]
	alert(document.documentElement.clientWidth);//获取可视区的宽度
	alert(document.documentElement.clientHeight);//获取可视区的高度
	var oDiv=document.getElementById('div')	
	console.log(oDiv.offsetWidth)//获取盒子的宽度
	console.log(oDiv.offsetHeight)//获取盒子的高度
	console.log(oDiv.offsetTop)	//获取盒子离顶部的距离
	console.log(oDiv.offsetLeft)//获取盒子离左边的距离
	console.log(document.body.scrollTop);//获取滚动条卷起高度

onload操作：

<html
<head>
<title>onload</title>
</head>
<script>
//表示当页面加载完之后才会执行函数内容
window.onload = function(){
	var oDiv = document.getElementById('div');
	alert(oDiv);
}
//当窗口大小发生改变的时候触发函数
window.onresize = function(){
	alert("100");
}
</script>
<body>
	<div id="div"></div>
</body>
</html>

2.获取属性：

<html
<head>
<title>属性</title>
</head>
<body>
	<div id="div" style="width:200px;height:300px;background-color:red"
	class="test"><p> Hello！</p></div>
</body>
<script>
	var oDiv=document.getElementById('div');
	alert(oDiv.id);//获取属性值
	alert(oDiv.className);
	//获取行内样式
	alert(oDiv.style.width);
	alert(oDiv.style.backgroundColor);//在html中属性带-,在js中去掉它并改为大写
	//获取内容
	alert(oDiv.innerHTML);//得到div标签内所有内容：<p>大家好！</p>
	alert(oDiv.innerText);//得到纯文本内容 “Hello！”
	//获取自定义属性
	oDiv.setAttribute('demo','100');//自定义属性的专属写法
	alert(oDiv.getAttribute('demo'));//自定义属性的专属获取方式
	//alert(oDiv.demo);不可以用这种方式获取
	</script>
</html>

注：获取行外样式方法：

<html
<head>
<title>属性</title>
<style>
#div{
	width:100px;
	height:100px;
	background-color:red;
}
</style>
</head>
<body>
	<div id="div"</div>
</body>
<script>
	var oDiv = document.getElementById('div');
	alert(getStyle(oDiv,'backgroundColor'));
	function getStyle(obj,name)
	{
		return obj.currentStyle ? obj.currentStyle[name]:    //IE支持
		getComputedStyle(obj,null)[name];            //火狐谷歌支持
	}
</script>
</html>

3.结点操作

<html
<head>
<title>属性</title>
</head>
<body>
	<ul id="ul">
		<li>刘备</li>
		<li id='li'>关羽</li>
		<li>张飞</li>
	</ul>
	<div id="parent">
		<div id="son"></div>
	</div>
</body>
<script>
	//通过父亲找儿子节点
	var oUl=document.getElementById('ul');
	alert(oUl.children);//得到子节点一个集合[object HTMLCollection]
	alert(oUl.children[0]);//得到第一个子节点对象
	alert(oUl.children[0].innerHTML);//得到第一个子节点对象文本
	
	//通过儿子找父亲节点
	var oDiv = document.getElementById('son');
	alert(oDiv.parentNode);//得到具体的父节点对象
	alert(oDiv.parentNode.id);//得到具体的父节点对象的某个属性值
	
	//找同辈节点
	var oLi1=document.getElementById('li');
	alert(oLi1.previousElementSibling.innerHTML);//得到同辈中的上一个节点
	alert(oLi1.nextElementSibling.innerHTML);//得到同辈中的下一个节点
	
	//创建、追加、删除、插入节点
	var oLi2 = document.createElement('li');//创建新节点
	oLi2.innerHTML='赵云';
	var oUl = document.getElementById('ul');//找父节点
	oUl.appendChild(oLi2);//找到父节点，追加li标签
	oUl.removeChild(oLi2);//找到父节点，删除li标签
	oUl.insertBefore(oLi2,oLi1);//将对象oLi2'赵云'插入到对象oLi1'关羽'前面
</script>
</html>