DOM常用的属性和方法

时间:2021-01-27 14:39:15

之前一直傻傻分不清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内容很多,突然发现,常用的也就那么些,就纯粹当做一个笔记吧!