Javascript——Dom操作

一、什么是DOM

DOM是文档对象模型的简称。W3C定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

二、DOM树

三、常用的获取元素对象的方法

1、通过id值来获取元素对象

document.getElementById("id值");

2、通过标签名获取元素对象

 document.getElementsByTagName("标签名");

3、通过选择器获取匹配到的第一个元素

document.querySelector("选择器");  //得到的值唯一

4、通过选择器获取匹配到的所有元素对象

 document.querySelectorAll("选择器");  //得到的是一个集合或列表

5、通过标签名获取匹配到的元素

var oLis = document.getElementsByTagName("li");//获取页面中所有的li对象组成的集合

这个方法可以返回带有指定标签名的对象的集合。如果想要得到每个元素可以采用遍历的方法

	获取页面中li元素
	document.getElementsByTagName('li');
	遍历伪数组：
	for(var i=0;i<lis.length;i++){
	console.log(lis[i])
	}

6、通过类名获取匹配到的元素

document.getElementsByClassName("类名")

四、DOM树中常见的节点类型及其属性

一、节点的类型

一、元素节点

二、属性节点

三、文本节点

二、节点的属性

一、元素节点

nodeType 1

nodeName 大写标签名

nodeValue null

二、属性节点

nodeType 2

nodeName 属性名

nodeValue 属性值

三、文本节点

nodeType 必须要了解

nodeName

nodeValue

元素节点

nodeType 1

nodeName 大写标签名

nodeValue null

属性节点

nodeType 2

nodeName 属性名

nodeValue 属性值

文本节点

nodeType 3

nodeName #text

nodeValue 文本内容

五、查看结点

一、通过父节点对象查找子节点对象

     父节点对象.firstChild      获取当前元素的第一个子节点

     父节点对象.lastChild      获取当前元素的最后一个子节点

     父节点对象.childNodes  获取当前元素的所有子节点 可能会有空格

     父节点对象.firstElementChild 查找父节点下的第一个子元素节点

     父节点对象.lastElementChild 查找父节点下的最后一个子元素节点

     父节点对象.children：获取当前元素的所有子元素

二、通过子节点对象查找父节点对象

     子节点对象.parentElement    通过子节点查找父元素

     子节点对象.parentNode         获取当前元素的父元素

三、通过子节点查找兄弟节点

      子节点对象.previousSibling   获取当前元素的前一个兄弟节点

      子节点对象.nextSibling           获取当前元素的后一个兄弟节点

      子节点对象.previousElementSibling   获取当前元素的前一个兄弟节点

      子节点对象.nextElementSibling           获取当前元素的后一个兄弟节点

 六、查看/修改/删除属性节点

查看属性节点:getAttribute（"属性名"）；

修改属性节点：setAttribute（“属性名”，“属性值”）；

删除属性节点：removerAttribute（“属性名”）；

七、创建和增加节点  

createElement（）：创建元素节点：

appendChild（）：末尾追加方式插入节点

insertBefore（）：在指定节点前插入新节点

cloneNode（）：克隆节点