DOM的整个知识体系

DOM说白了就是将HTML文档变成一个文档节点树,我们要学会的就是如何/查找节点 /修改节点/添加节点/创建节点/克隆节点/删除节点/替换节点/这几件事情。

 第一部分:获取某个你想操作的元素对象

当然我们得从document对象出发去查找:

 第一种:作为document对象的属性存在(由于历史上一开始DOM就是用来处理表单和图片的,所以当时我们可以直接引用document的属性的形式)

1.document.anchors(包含文档中所有带name属性的a元素) 

2.document.applets(不做介绍)

3.document.forms     (文档中所有的表单元素)

4.document.images (文档中所有的图片)

5.document.links   (文档中所有带有href属性的a元素) 

第二部分:查找元素 

下面说说我们经常使用的document对象中的一些方法来获取你需要操作的元素

 1. document.getElementById('XXX')                     获取元素的ID属性为XXX的元素

 2. document.getElementsByTagName('XXX')         获取标签为XXX的对象数组

 3. document.getElemenetsByClassName('XXX')     获取类为XXX的对象数组 

第三部分:通过位置来获取相关元素 (通过node节点相关的方法来实现的)

所有节点都继承于NODE 类型,所以他们都有下面这些属性:nodeType nodeName nodeValue

nodeValue用于替换或者获取某个文本节点的值 

前面说过了,DOM就是将HTML文档转换成节点树的形式而且都变成了相对应的对象。 

 某一节点:子节点:childNodes           注:这是个对象数组

               父节点 :parentNode      

       下一兄弟节点:nextSibling

       前一兄弟节点:previousSibling

       第一个字节点:firstChild

       最后一个子节点:lastChild 

用法如下:document.getElementById('only').childNodes 

第三部分:修改节点的属性或者文本或者内部含有的HTML

修改属性:setAttribute('pro','value') 获得属性:getAttribute('pro')

修改标签内部结构:innerHTML既可以用来获取某部分结构,也可以写入 

第四部分:创建新元素并添加到某个节点上

 createElement (创建新元素)需要在document对象下创建一个新元素 如var staff=document.createElement('某个HTML标签')//这样就创建完成了

 createTextNode(创建新文本节点)document.createTextNode

 第五部分:添加元素/替换/删除/克隆

添加有:appendChild 添加到某个元素的某个位置上          用法:某个节点.appendChild(某个需要添加的元素) 这里添加到元素的最后一个

           insertBefore  插入在某个节点之前

     replaceChild  替换某个子元素节点

   removeChild  删除某个节点 

           cloneChild       

原文地址:https://www.cnblogs.com/steven-wujianpeng/p/3602027.html