DOM

核桃路
296 阅读4分钟

DOM树

DOM tree 当浏览器加载HTML页面的时候 , 首先就是DOM结构的计算 , 计算出来的DOM结构就是DOM树 ( 把页面中的HTML标签像树状结构一样 , 分析出之前的层级关系)

<div class="box" id="box">
		<ul>
			<li>新闻</li>
			<li>电影</li>
			<li>音乐</li>
		</ul>
		<div>最新新闻</div>
		<div>最新电影</div>
		<div>最新音乐</div>
</div>

DOM树描述了标签和标签之间的关系 ( 节点间的关系 ) , 我们只要知道任何一个标签 , 都可以一句DOM中提供的属性和方法 , 获取到页面中任意一个标签或者节点

在JS中获取DOM元素的方法

getElementById

通过元素ID获取指定的元素对象 , 使用的时候都是 document.getElementById('')此处的document 是限定了获取元素的范围 , 我们把它称之为 “ 上下文( context ) ”

  1. getElementById 的上下文只能是 document

引文严格意义上 , 一个页面中的ID是不能重复的 , 浏览器规定在整个文档中既可以获取这个唯一的 ID

  1. 如果页面中的ID重复了 , 我嫩基于这个方法只能获取到第一个元素 , 后面相同ID的元素无法获取
  2. 在IE6~7浏览器中 , 会把表单元素( input ... ) 的name属性值当作ID来使用( 建议 ：以后使用表单元素的时候 , 不要让name和id的值有冲突 )

getElementsByTagName

[context].getELementsByTagName 在指定的上下文中 , 根据标签名获取到一组元素集合 ( HTMLCollection )

  1. 获取的元素集合是一个类数组 ( 不能直接使用数组中的方法 )

  1. 它会把当前上下文中 , 子子孙子 ( 后代 ) 层级内的标签都获取到 ( 获取的不仅仅是儿子级的 )

  2. 基于这个方法获取到的结果永远都是一个集合 ( 不管里面是否有内容 , 也不管有几项 , 它是一个容器或者集合 ) 如果想操作集合中具体的某一项 , 需要基于索引获取到才可以

getElementByClassName

[context].getElementsByClassName() 在指定的上下文中 , 基于元素的样式类名 ( class = 'xxx' ) 获取到一组元素集合

  1. 真实项目中 , 我们经常是基于样式类来给元素设置样式 , 所以在JS中 , 我们经常基于样式类来获取元素 , 但是此方法在IE6~8下不兼容 兼容处理方案参考

getElementsByName

document.getElementsByName()它的上下文也只能是document , 在整个文档中 , 基于元素的name属性值获取一组节点集合(也是一个类数组)

  1. 在IE浏览器中 , 只对表单元素的name属性起作用( 正常来说 : 我们项目中只会给表单元素设置name , 给非表单元素设置name , 其实是一个不太符合规范的操作 ) name给表单元素进行分组

querySelector

[context].querySelector() 在指定的上下文中基于选择器( 类似于CSS选择器 ) 获取到指定的元素对象 ( 获取的是一个元素 , 哪怕选择器匹配了多个 , 我们只获取一个 ) querySelectorAll 在querySelector 的基础上 , 我们获取到选择器匹配到的所有元素 , 结果是一个节点集合( NodeList )

  1. querySelector / querySelectorAll 都是不兼容IE6~8浏览器的 ( 不考虑兼容的情况下 ,我们能用byId 或者其他方式获取的 ,也尽量不要用这两个方法 ,这两个方法性能消耗较大 ) document.head

获取 HEAD元素对象 document.body 获取BODY元素对象 document.documentElement 获取HTML元素对象

//=>需求 ： 获取浏览器一屏幕的宽度和高度 (兼容所有浏览器)
document.documentElement.clientWidth || document.body.clientWidth

document.documentElement.clientHeight || document.body.clientHeight

面试题 : 获取当前页面中所有ID为HAHA的 ( 兼容所有的浏览器 )

//=>不能使用querySelectorAll
  1. 首先获取当前文档中所有的HTML标签
  2. 依次遍历这些元素标签对象 , 谁的ID等于HAHA , 我们就把谁存储起来即可

在JS中可以把ID当作变量来用 , 在JS中 , 默认会把元素的ID设置为变量 ( 不许要在即获取设置 ) , 而且ID重复 ,获取的结果是一个集合 , 包含所有的ID项 , 不重复就是一个元素对象 ( 类似于ById的结果 )

这是我建的qq群里面有很多资源，希望能和大家一起学习讨论共同进步!

这是群号:778734441

avatar
文章
阅读
粉丝