HTML DOM

一、DOM的概念

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构称为节点组成的节点树。

二、元素节点

1.元素节点对象的获取方式

getElementById():  //获取特定ID元素的节点对象(返回一个对象)         getElementsByTagName():  //获取指定标签名的节点列表(返回一个数组)         getElementsByName():  //获取相同name属性值的节点列表(返回一个数组)

2.getElementById()

getElementById()需要给一个参数: 元素节点的id属性值。如果找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回 null。

   例如: 获取 id 为 box 的元素节点

var box = document.getElementById('box'); //注意: 如果id值存在, 但是返回null，则是执行顺序的问题

解决方法:

1. 把

window.onload=function() {             document.getElementById('box');  //id具有唯一性 };

3.元素节点的属性

tagName: //元素节点对象所指向的标签名称id: //元素节点的id属性值innerHTML: //元素节点中的内容className: //元素节点的class属性值style: //css内联样式对象title:  //元素节点的title属性值//例如document.getElementById(‘box’).id;    //获取 id document.getElementById(‘box’).id = ‘person’;   //设置iddocument.getElementById(‘box’).style;   //获取css样式对象 document.getElementById(‘box’).style.color;    //获取 style 对象中 color 值document.getElementById(‘box’).style.color=‘red’;  //设置 style 对象中 color 的值document.getElementById(‘box’).className;   //获取 classdocument.getElementById(‘box’).className=‘box’;   //设置 class

4.获取子元素节点

我们获取元素节点不一定必须使用document.来调用getElementsByTagName()或getElementByName(); 在某些情况下, 我们需要获取指定范围内的子元素节点.

<div id="box">      <img src="images/1.jpg">      <img src="images/2.jpg">      <img src="images/3.jpg"></div><img id="showImg" src="images/4.jpg" />//通过oBox元素节点, 获取其三个子元素节点imgvar oBox = document.getElementById("box");var aImg = oBox.getElementsByTagName("img");

5.元素节点间的关系的相关属性

parentNode:  //属性返回该节点的父节点，previousSibling:  //属性返回该节点的前一个同级节点，nextSibling:  //属性返回该节点的后一个同级节点。空白区域也算 previousElementSiblingnextElementSibling    //忽略空白区域例如: console.log(box.parentNode.nodeName);  //获取父节点的标签名 console.log(box.lastChild.previousSibling); //获取前一个同级节点console.log(box.firstChild.nextSibling);       //获取后一个同级节点

6.DOM节点操作

DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等

     createElement('tr'); //创建一个tr元素节点      appendChild(); //添加一个新子节点到子节点的末尾      createTextNode(); //创建一个文本节点      insertBefore(); //将新节点插入到某节点前面      replaceChild(); //将新节点替换旧节点      cloneNode(); //复制节点      removeChild(); //移除节点

1. createElement()      createElement()方法可以创建一个元素节点。//例如: var newEle = document.createElement(‘div’);2. appendChild()       appendChild()方法可以将一个新节点添加到某个节点的子节点列表的末尾上。 //例如: var box = document.getElementById(‘box’); var pNode = document.createElement(‘p’);   //创建一个新元素节点<p> box.appendChild(pNode);   //把新元素节点<p>添加box节点的子节点末尾3. createTextNode()      createTextNode() 方法可以创建一个文本节点。 //例如: var textNode = document.createTextNode(‘段落’); //创建一个文本节点p.appendChild(textNode);  //将文本节点添加到子节点末尾4. insertBefore()      insertBefore()方法可以把节点插入到指定节点的前面。 //例如: //通过父节点调用, 在box之前插入一个新节点p;//第一个参数为新节点box.parentNode.insertBefore(p, box); 5. replaceChild()      replaceChild()方法可以把节点替换成指定的节点。 //例如: //通过父节点调用, 新节点p替换了旧节点div//第一个参数为新节点, 第二个参数为旧节点box.parentNode.replaceChild(p, box);6. cloneNode()      cloneNode()方法可以把子节点复制出来。 //例如: //获取第一个子节点, true表示复制标签和内容 , false表示只复制标签var box = document.getElementById(‘box’);Var newNode = box.firstChild.cloneNode(true); box.appendChild(newNode);  //添加到子节点列表末尾7. removeChild()      removeChild()方法可以删除指定子节点//例如: //通过父节点调用, 来删除指定子节点box.parentNode.removeChild(box);