javascript DOM（08-21）

1.createElement()和createTextNode()

• //创建一个li新元素 

• var newChild=document.createElement('li'); 

• //创建一个a 新元素 

• var newLink=document.createElement('a') 

• //创建一个 Text 节点 

• var newText=document.createTextNode('My Wiki');

最常见的JavaScript DOM方法实战-修改文档树中，用到的appendChild()或insertBefore()将它们附加到文档树中。

• var nav=document.getElementById("nav"); 

• //创建一个li新元素 

• var newChild=document.createElement('li'); 

• //创建一个a 新元素 

• var newLink=document.createElement('a') 

• //创建一个 Text 节点 

• var newText=document.createTextNode('My Wiki'); 

• //把Text添加到a元素节点中 

• newLink.appendChild(newText); 

• //给a元素节点设置属性href和内容 

• newLink.setAttribute('href',"#"); 

• //把a元素节点添加到新的li元素节点中 

• newChild.appendChild(newLink); 

• //把新的li元素节点添加到 ul 元素节点里 

         nav.appendChild(newChild);

 

2.用来动态创建HTML内容的“老”技巧：document.write()方法和innerHTML属性

 

3.insertBefore()方法：将把一个新元素插入到一个现有元素的前面

parentElement.insertBefore(newElement,targetElement);

其中：newElement是想插入的元素；targetElement是想把新元素newElement插入到哪个现有元素(targetElement)的前面；

parentElement是上面两元素newElement、targetElement共同的父元素（这儿的父元素一般是targetElement元素的parentNode属性）

例如：

var  gallery = document.getElementById("imagegallery");

 gallery.parentNode.insertBefore(placeholder,gallery); //把placeholder元素插入到图片清单的前面

DOM中没有insertAfter()方法

自身定义insertAfter()方法。如下：

              function insertAfter(newElement,targetElement) {

              var parent = targetElement.parentNode;  //把目标元素的parentNode属性

                                                                             值提取到变量parent里

              if(parent.lastChild == targetElement) {  //检查目标元素是不是parent的最后一

                                                                            个子元素     

  parent.appendChild(newElement);

              } else {

                     parent.insertBefore(newElement,targetElement.nextSibling);  //targetElement.nextSibling为目标元素

                                                                下一个子元素即目标元素的下一个兄弟节点

 }

             }

 

 

 

 

 ---------------------------------------------

08-21

一.Dom中创建，添加，删除，修改，替换，复制，网页中的标签和文本内容的方法如下．

1. 在网页中的创建一个标签元素：createElement

2. 创建一段文本内容：createTextNode

3. 向网页中添加元素：appendChild

4. 删除元素的Dom方法是：removeChild

5. 修改网页中标签元素的属性：setAttribute

6. 替换已存在的标签或元素：replaceChild

7. 复制克隆已存在的标签或元素：cloneNode

8. 获取和修改元素内的html标签与文本内容：innerHTML

9. 获取或修改元素的文本内容，仅支持IE：innerText

10. 获取或修改元素的文本内容，支持FF：textContent

 二.HTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素

1. HTML Dom中的insertRow方法可以为表格增加一行

2. 删除表格中一行的方法是：deleteRow

3. HTML Dom中的insertCell方法可以为表格某行中增加一列

4. 删除行中的一列的方法是：deleteCell

5. HTML Dom中的createCaption方法可以为表格创建一个标题

6. HTML Dom中的createTHead方法可以为表格创建一个Thead

7. HTML Dom中的createTFoot方法可以为表格创建一个TFoot

8. 引用表格中所有行的属性为：rows

9. 引用表格中某行的所有列：cells

10. 移动表格中的行，只支持IE：moveRow

 

 三.查找并访问节点

1.你可通过若干种方法来查找您希望操作的元素：

• 通过使用 getElementById() 和 getElementsByTagName() 方法
• 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

 

2.getElementById()

语法：document.getElementById("ID");

返回的类型是一个对象Object，该对象对应着文档里的一个特定的元素节点

 

3.etElementsByTagName()

语法：document.getElementsByTagName("标签名称"); 返回的是一个数组

或者：document.getElementById('ID').getElementsByTagName("标签名称");

 

4.DOM其他属性

childNodes:  此属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出     来。childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素      element.childNodes

nodeValue属性：如果想改变某个文本节点的值，就使用DOM提供的nodeValue属性。它的用途就是检索和设置节点的值   

node.nodeValue

 

nodeName:  nodeName属性含有某个节点的名称。 

元素节点的nodeName是标签名称  
属性节点的nodeName是属性名称 
文本节点的nodeName永远是#text 
文档节点的nodeName永远是#document