JS DOM(3)

最新推荐文章于 2024-07-30 10:27:19 发布

嘟噜嘟噜123

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量88

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62371223/article/details/124976360

版权

一：获取元素的css

元素.style.属性
只能获取行内样式
getComputedStyle (元素).属性名（IE不兼容）
getComputedStyle是window下一个方法；把对应的元素传给这个方法
他是window上的一个属性
获取浏览器计算的样式
如果是复合属性名，把-去掉，换成驼峰命名；
`console.log(getComputedStyle(元素).属性名)``
`console.log(getComputedStyle(box).width)``
`console.log(getComputedStyle(box)[‘width’])``
currentStyle（只有IE兼容）
元素.currentStyle.属性名
IE8及以下，用这个方法获取元素css中设置的样式；
他是元素身上的属性

二、节点的遍历二、节点的遍历一、获取节点

通过id查询节点document.getElementById

通过标签查询节点（查询的是一类节点，返回的是一个类似数组的HTML集合document.getElementsByTagName

通过类名来获取节点元素（返回的是一个类似数组的HTML集合）
var lo = document.getElementsByClassName("lo")

通过name来获取节点元素（返回的是一个类似数组的节点列表NodeList）
var frc = document.getElementsByName("frc")
querySelector(通过css选择器的方式来获取节点)
var p2 = document.querySelector("p:nth-of-type(2)")
var p3 = document.querySelector(".p3")

二、节点的遍历

//for循环遍历
for(let i =0;i<p.length;i++){
 	console.log(p[i],p[i].innerText)
}
 
//转化为数组的遍历，elem为遍历的元素
Array.from(p).forEach(function(elem){
	console.log(elem,elem.innerText)
})

三、节点关系查找


<div id="parent">
	<p>我是第一个</p>
	<p id="p2">我是第二个</p>
	<p>我是第三个</p>
	<h5>我是最后一个</h5>
</div>
 
// parent的第一个子节点
var frist = parent.firstElementChild; 
 
//parent的第一个最后一个子节点
var last = parent.lastElementChild; 
 
//parentElement,表示元素的父节点元素
console.log('p2的父节点',p2.parentElement) 
 
//previousElementSibling表示p2的上一个兄弟元素节点
console.log('p2的上一个兄弟',p2.previousElementSibling); 
 
//nextElementSibling表示p2的下一个兄弟元素节点
console.log('p2的下一个兄弟',p2.nextElementSibling);

四，属性的修改

<h1>属性修改</h1>
<img src="../img/分组%2035%20(1).png" alt="图片">
<br>
<br>
<button type="button" onclick="changeImg()">修改图片</button>
<script type="text/javascript">
	function changeImg(){
		var img=document.querySelector("img")
 
        //setAttribute设置属性
		img.setAttribute("src","../img/分组%2035%20(2).png")
 
        //removeAttribute移除属性
		img.removeAttribute("alt")
	}
</script>

五、创建和插入节点 /复制节点和删除节点

function create1Img(){
 
    //通过js创建一张图片
    var img = document.createElement("img");
 
    //给图片的src一个指定的路径
    img.setAttribute("src","../img/分组%2035%20(1).png")
 
    //获取要插入得位置
    var h5 = document.getElementById('h5')
 
    //插入到获取得位置的前面
    document.body.insertBefore(img,h5)
 
}
 
function copy(){
 
    //获取要复制得照片
    var pic1 = document.getElementById('pic1')
 
    //复制照片，false只是当前节点，true包含子节点
    var img = pic1.cloneNode(false);
 
    //将图片插入到body标签中
    document.body.appendChild(img)
 
}
 
function del(){
    //获取到要删除得对象
    var pic = document.querySelector('img:last-of-type')
 
    //删除，自己删除自己
    pic.remove();
 
    //通过父节点来删除
    // pic.parentElement.removeChild(pic);
 
}

六，元素与父元素距离

offsetLeft与相对父元素的左偏移值
offsetTop与相对父元素的垂直偏移值
offsetParent相对父元素
元素的父辈元素有position非static值

七，元素的滚动距离

elem.scrollTop
elem.scrollLeft
浏览器滚动距离
document.documentElement.scrollTop
document.body.scrollTop

八，事件的绑定与解绑
1.绑定
btn.οnclick=function（）{}

btn.addEventListener(type,funName)

2.解绑
btn.οnclick=null

btn.removeEventListener(type,funName)

匿名函数不能解绑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>事件的绑定与解绑</h1>
		<button class="btn1">按钮1</button>
		<button class="btn2">按钮2</button>
		<button class="btn3">解绑say</button>
		<script>
			// 给btn2注册2个单击事件
			function say(){
				// this指向的是btn2这个按钮
				alert(this.innerText);
			}
			function doit(){
				alert("我要挣100万");
			}
			var btn2 = document.querySelector(".btn2");
			btn2.addEventListener("click",say);
			btn2.addEventListener("click",doit);
			btn2.addEventListener("click",function(){
				alert("我要娶高富帅");
			})
			
			
			//  btn3单击解绑 say方法
			var btn3 = document.querySelector(".btn3");
			btn3.onclick = function(){
				// 解绑了btn2.click事件的 say函数响应
				btn2.removeEventListener("click",say);
				btn2.removeEventListener("click",doit);
				 
				
			}
			
			
			// 给按钮1添加事件
			var btn1 = document.querySelector(".btn1");
			btn1.onclick = function(){
				alert("啊,我被点击了,这是最后一次");
				btn1.onclick = null;
			}
		</script>
	</body>
</html>

嘟噜嘟噜123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS DOM(3)

一：获取元素的css元素.style.属性只能获取行内样式getComputedStyle (元素).属性名（IE不兼容）getComputedStyle是window下一个方法；把对应的元素传给这个方法他是window上的一个属性获取浏览器计算的样式如果是复合属性名，把-去掉，换成驼峰命名；`console.log(getComputedStyle(元素).属性名)```console.log(getComputedStyle(box).width)```console.log(getComput.
复制链接

扫一扫