之前一直傻傻分不清DOM和JavaScript究竟有什么区别,随着相关工作时间的增长,开始逐渐区分DOM和JavaScript了,最近,也一直在复习有关DOM方面的知识,《JavaScript DOM编程艺术》,就是他了,也看了好几遍了,做一点阶段性的总结吧!由于完全是基础知识,也就完全总结基础知识相关的吧!
DOM选取元素:
document.getElementById 通过id选取元素
document.getELmentsByTagName 通过标签名选取元素
document.getElementsByName 通过元素属性name获取元素
document.getElementsByClassName 通过className获取元素,html5新增
这几个选择元素的方法也确实没什么好说的,基本上写过原生js的,应该都用过
document.querySelector(css) 获取文档中匹配指定 CSS 选择器的一个元素
document.querySelectorAll(css) 返回文档中匹配的CSS选择器的所有元素节点列表
这两个方法也是html5新增,参数css选择器,可以是任意一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
DOM元素节点属性
elem.childNodes 元素elem的所有子元素,包括文本节点,元素节点,甚至注释节点
elem.parentNode 元素elem的父节点,为元素节点
elem.nextSibling 元素elem之后紧跟的节点(处于同一树层级中)
elem.previousSibling 元素elem之前的节点(处于同一树层级中)
elem.firstChild 元素elem第一个子节点
elem.lastChild 元素elem最后一个子节点
document.createElement() 创建一个元素节点,元素名称为所传入的参数
document.createTextNode() 创建一个文本节点,文本内容以参数传入
document.createDocumentFragment() 创建空的 DocumentFragment 对象,并返回此对象。
elem.appendChild(node) 在元素elem内部追加子节点node
elem.insertBefore(newElem, targetElem) 在elem元素内部的targetElem元素前面添加新的元素newElem
elem.getAttribute(attr) 获取elem元素的属性attr
elem.setAttribute(attr, 'attr') 设置elem元素的属性attr为attr
以上,应该为DOM常用的一些属性和方法了。一直觉得DOM内容很多,突然发现,常用的也就那么些,就纯粹当做一个笔记吧!