2-document对象、遍历节点树、遍历元素节点树

valueyear

于 2021-12-05 19:00:58 发布

阅读量854

点赞数

分类专栏： DOM 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43714814/article/details/121733411

版权

(一)、document对象（1）、getElementById在ie8以下的浏览器是不区分大小写的var box = document.getElementById('Box');console.log(box);在ie8及以下会通过name找<body> <div id="box1" name="box">123123</div> <script type="text/javascript"> var box = doc

摘要由CSDN通过智能技术生成

(一)、document对象

（1）、getElementById

在ie8以下的浏览器是不区分大小写的

var box = document.getElementById('Box');
console.log(box);

在ie8及以下会通过name找

<body>
   <div id="box1" name="box">123123</div>
   <script type="text/javascript">
     var box = document.getElementById('box');
     console.log(box);
   </script>
</body>

开发习惯和规范：

id在项目中是不可以随便乱用的，在大公司，id一般不作为样式去定义。

在大公司，id一般都称之为钩子。获取元素是一种，但是这一种都非常地少，

id真正的用处是对接后端的，在模块化开发中，一个块一个id

最早以前，id是给布局最上层的盒子用的，能够一眼区分出哪些是布局的，哪些是内部的

能不用id尽量不要用id

（2）、getElementsByTagName

全部都支持 ie4都支持

注意：在document下面获取元素的方法中，除了getElementById其他都是选择一组的。

<body>
	<div>123123</div>
	<div>234234</div>
	<script type="text/javascript">
       var boxes = document.getElementsByTagName('div');
       console.log(boxes);
    </script>		
</body>

（3）、getElementsByClassName

ie8及ie8以下没有该方法

<body>
	<div class="box">123123</div>
	<div class="box">123123</div>
	<script type="text/javascript">
       var boxes = document.getElementsByClassName('box');
       console.log(boxes);
    </script>		
</body>

（4）、getElementsByName

极为不常用,用得特别少。

<body>
	<input type="text" name="username" />
	<script type="text/javascript">
       var input = document.getElementsByName('username');
       console.log(input);
    </script>		
</body>

原则上，在ie8以下，只能用于有name属性的标签，并不绝对。

知道就行，实际开发中也不可能在div上添加name。

<body>
	<div name="box"></div>
	<script type="text/javascript">
       var box = document.getElementsByName('box');
       console.log(box);
    </script>		
</body>

（5）、querySelector querySelectorAll

缺点：

公司基本上不用。性能比getxxx要差的多

不实时，相当于存了一个缓存在那，稍微有点更改对它是无效的

HTML5新引入的WEB API,但是它并不是HTML5有了以后才有的东西，只是HTML5正式把它引入到HTML标准。

querySelector querySelectorAll 比 getElementsByClassName还要早，IE7的时候就有了，兼容性很好。

querySelector() 括号里面的写法与CSS选择器写法一摸一样

querySelector()

querySelector()最多只能选择一个元素，如果有多个元素只会选择第一个元素。

<body>
	<div class="text">123</div>
	<div class="text">234</div>
	<script type="text/javascript">

最低0.47元/天解锁文章

valueyear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-document对象、遍历节点树、遍历元素节点树

(一)、document对象（1）、getElementById在ie8以下的浏览器是不区分大小写的var box = document.getElementById('Box');console.log(box);在ie8及以下会通过name找<body> <div id="box1" name="box">123123</div> <script type="text/javascript"> var box = doc
复制链接

扫一扫