dom 基本操作/结构树

最新推荐文章于 2024-02-19 16:52:04 发布

源君

最新推荐文章于 2024-02-19 16:52:04 发布

阅读量126

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43157199/article/details/84873724

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

document的意义

指的是浏览器加载的整个页面

获取标签

    //通过标签id
    var div = document.getElementById();
    //通过标签名
    var div1= document.getElementsByTagName();
    //通过类名,存在兼容问题 
    var div2=document.getElementsByClassName();
    //通过name属性，注意只有部分存在name属性的标签才能使用。
    var div3=document.getElementsByName();
    //query 一般不用因为这是一个照相，而不是一个实时的东西
    <div><span>
    			<strong></strong>
    	</span></div>
    	<script type="text/javascript">
    		// var div = document.getElementById();
    		// var div1= document.getElementsByTagName();
    		// var div2=document.getElementsByClassName();
    		// var div3=document.getElementsByName();
    		var div4=document.querySelector('div > span strong');

节点树

在这里插入图片描述

节点类型
<div><span>
			
	</span>
	<strong></strong>
	<em></em>
	</div>
	<script type="text/javascript">
		// // var div = document.getElementById();
		// // var div1= document.getElementsByTagName();
		// // var div2=document.getElementsByClassName();
		// // var div3=document.getElementsByName();
		// var div4=document.querySelector('div > span strong');
		//父节点parentNode
		var strong = document.getElementsByTagName("strong")[0];
		//childNodes 注意 这个子节点是所有的子节点，什么算节点？参考上图
		//firstChild
		//lastChild
		//nextSibling 下一个兄弟节点
		//previousSibling 前一个兄弟节点