DOM知识点的简单总结

DOM知识点的简单总结

DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。

节点操作

1、DOM的节点主要分为三类：
元素节点：

<p class = "box">hello word</p>

属性节点：class = “box”;
文本节点：hello word;
2、获取元素节点的方式：
document.getElementById() :通过ID查找，返回唯一元素节点
document.getElementsByTagName():通过标签名称查找，返回元素节点数组
document.querySelector(”.box“)：通过selector条件获取元素节点，只返回符合条件的第一个元素节点。
document.querySelector(”.box“)：通过selector条件获取元素节点，返回所有符合条件的元素节点数组
3、创建元素节点：document.creatElement(“div”).创建一个div标签
4、把节点挂载到dom树上：_.appendchild(div).把div挂载到父元素，上在目标节点的子节点的末尾添加一个子节点
5、删除元素节点：removeChild方法用来删除一个指定节点。
6、获取一个属性的值：目标元素.getAttribute(元素属性名称);
7、setAttribute方法用来设置一个属性的值，没有该属性则创建。目标元素.setAttribute(元素属性名称,属性值);
8、insertBefore:在目标元素的前面插入一个新元素节点，此时的指针在目标元素的父级上。
9、replaceChild方法用来替换一个元素节点，此时的指针在目标元素的父级上。

DOM操作位置和大小

1、clienWidth:实际宽度：width+padding
2、clientHeight:实际高度：height+padding
clientWidth/clientHeight常用来获取一屏的高度和宽度：document.body.clientWidth/document.documentElement.clientWidth;
3、offsetWidth:实际宽度:width+padding+border
4、offsetHeight:实际高度:height+padding+border
5、offsetleft:获取一个绝对定位元素相对于参考点左面的位置
6、offsettop:获取一个绝对定位元素相对于参考点上边的位置
7、offsetparent:获取一个绝对定位元素的参考点
8、scrollwidth/scrollheight:在没有内容溢出时，高度宽度为width/height+padding，在有内容溢出时高度宽度约等于真实值；
9、scrolltop:获取垂直滚动条卷上去的高度（可获取，可设置）
10、scrollleft:获取水平滚顶条卷的宽度（可获取，可设置）
获取真实内容高度：document.body.scrollHeight/document.documentElement.scrollHeight
一张网页卷上去的真实高度：scrollHeight-clientHeight;

DOM中的定时器

1、一次性定时器：

<script>
window.setTimeout(()=>{
     
     
	 
	},1000);
</script>

表示1s后执行回调函数，关闭定时器：clearTimeout();
2、循环定时器

<script>
window.setInterval(()=>{
     
     
	 
	},1000);
</script>

表示每隔1s就执行一次回调函数，关闭定时器：clearInterval();

事件对象

<script>
box.onclick=function(e){
     
     
}
</script>

当事件发生时，浏览器调用对象，传递一个对象，此对象为事件对象

取消默认事件

对于a标签而言：
1、利用行内

<a href="javascript:;"></a>

2、利用事件对象阻止

<script>
	a.onclick=function(e){
     
     
		e.preventDefault();
	}
</script>

3、在监听器后面返回

<script>
	a.onclick=function(e){
     
     
		return false;
	}
</script>