js学习之dom继承树与dom操作

在接触了dom选择器后，学习的就是关于dom继承树与其操作了。

上面的这个就是关于dom结构树的结构图，首先是根节点Node其就好比树根，它有四个分支，第一个就是Document,Document又有分支，而HtmlDocument是其中的一个分支。其余的也类似这种表述。

在说到下面的问题时，我们首先要明白一些html中节点类型

元素节点——>1

属性节点——>2

注释节点——>8

文本节点——>3

document——>9

在Document中，其有很多的方法，其很多的方法就是对于Dom操作中节点的查找。

document.getElementById(‘’)//此时选的是当元素

ducument.getElementsByTagName（‘’）//此时选的是类数组

document.getElementsByClassName(‘’)//IE8和IE8一线的ie版本没有

document.getElementsByName(‘’)//name属性的兼容性不好（表单，表单元素，img ,iframe）

关于类数组的选择时，需要加上数组的位置标记

这两个选择器是静态的，对其进行删除操作是没用的，不是实时的。

document.querySelector()//写css选择器，选的是单个

document.querySelectorAll()//写css选择器，选的是一组

遍历节点树选择

parentNode  ——>父节点（一个元素只能有一个节点，最顶端的父节点是#document）

firstChild——>第一个子节点

lastChild——>最后一个子节点

nextSibling——>后一个兄弟节点

previousSibling——>前一个节点

遍历元素节点树

parentElement——>元素父节点（IE不兼容）

children——>元素子节点

firstElementChild——>第一个元素子节点（IE不兼容）

lastElementChild——>最后一个元素子节点（IE不兼容）

nextElementSibling/previousElementSlibling——>后/前一个元素节点（IE不兼容）

节点的四个属性，

nodeName   //元素的标签名，以大写的形式表示，只读

nodeValue   //Text节点或Comment节点

nodeType    //该节点的类型，只读

attributes     //Element节点的属性集合

Dom操作，一些（创建，插入，删除，替换）

创建

document.creatElement()//创建一个元素节点，并未放在页面中

document.creatTextNode()//创建一个文本节点，并未放在页面中

document.creatComment()//创建一个注释节点

插入

PARENTNODe.appendChild()//剪切插入创建好的节点

PARENTNODe.insertBefore(a,b)//将b插入到a中

删除

parent.removeChild()//剪切删除

child.remove()//直接销毁删除

替换

parent.replaceChild(new,arigin)

Element的一些属性

innerHTML //改变HTML页面中的内容

div.innerHTML = “213”//覆盖页面中的内容