今天分享的是JavaScript中的重要组成部分DOM
DOM
在浏览器标签中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”,使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时,使用它将样式和其他信息应用于正确的元素,而页面呈现完成以后,开发人员可以用JavaScript操作DOM。
文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。
- 元素节点: 一个元素,存在于DOM中。
- 根节点: 树中顶层节点,在HTML的情况下,总是一个HTML节点(其他标记词汇,如SVG和定制XML将有不同的根元素)。
- 子节点: 直接位于另一个节点内的节点。
- 后代节点: 位于另一个节点内任意位置的节点。
- 父节点: 里面有另一个节点的节点。
- 兄弟节点: DOM树中位于同一等级的节点。
- 文本节点: 包含文字串的节点
-
document.getElementById(‘id名’)
在document上下文下获取元素(通过Id获取的元素是一个元素对象,获取不到就是null) -
context.getElementsByTagName(‘标签名’)
通过指定的上下文获取指定的标签,获取的是一个元素集合,如果没有获取到元素,那就是空元素集合 -
context.getElementsByClassName(’’)
通过指定的上下文或按照class名取指定的标签,获取的是一个元素集合,如果没有获取到元素,那就是空元素集合在IE6~8下不兼容 -
context.getElementsByName(’’)
在整个文档中,通过标签的NAME属性值获取一组节点集合(在IE中只有表单元素的NAME才能识别,所以我们一般应用于表单元素的处理) -
document.body/document.head/document.documentElement
console.log(document.body) //获取body
console.log(document.head) //获取head
console.log(document.documentElement) //获取html
- context.querySelector(‘选择器’)
在指定上下文中通过选择器获取第一个元素(只能获取一个),获取不到就是null
在IE6~8下不兼容 - context.querySelectorAll()
在指定上下文中通过选择器获取一组元素集合,获取不到就是空元素集合在IE6~8下不兼容
- childNodes :获取的所有的子节点
- children :获取所有的元素子节点(子元素标签集合)(在IE6~8下不兼容)
- firstChild :获取第一个子节点
- lastChild :获取最后一个子节点
- firstElementChild :获取第一个元素子节点(在IE6~8下不兼容)
- lastElementChild :获取最后一个元素子节点(在IE6~8下不兼容)
- previousSibling :获取上一个同级节点(获取上一个哥哥节点)
- nextSibling :获取下一个同级节点(获取下一个弟弟节点)
- previousElementSibling:获取上一个同级元素节点(在IE6~8下不兼容)(获取哥哥元素节点)
- nextElementSibling :获取上一个同级元素节点(在IE6~8下不兼容)(获取弟弟元素节点)
- parentNode :获取父节点
- createElement:创建元素节点
- createTextNode:创建文本节点
- 容器.appendChild(节点):把节点插入到容器的末尾
- 容器.insertBefore(新节点,老节点):把新节点插入到老节点的前面
- 容器.removerChild(节点):移除容器中的节点
节点.cloneNode(true/false)
克隆节点,如果传参是true就是深克隆,如果不传参或者传false就是浅克隆(只复制外层元素,不复制里边的内容)
dom的回流:单页面的dom产生变化(增加,删除,改变位置,改变大小)都会引发dom的回流,所谓回流:就是把dom重新排列进行渲染,他会非常消耗性能
创建一个文档碎片进行优化
模板字符串进行优化
重绘:当某一个dom元素的样式发生改变(比如改变dom的颜色),不会引起dom的回流,但是会重新绘制
以上就是我这次对JavaScript的学习感受,欢迎斧正。