06-JS DOM operations

 

Creating nodes

document.write (create any content, and write)

document.write ( "<h1> added to the text of html </ h1>");

 

docement.createElement (create elements)

var JD = document.createElement ( "li"); // create a li element

 

document.createTextNode (create text)

var wb = document.createTextNode ( "Text created");   // create a text

 

document.createDocumentFragment (creating a virtual node object)

var the fragment document.createDocumentFragment = ();    // Create a virtual node object, a node object contains all the properties and methods. 

//document.createDocumentFragment () advantages: it means to save the use of DOM. Every JavaScript DOM operations will change for the realization of the page and refresh the entire page, thus reducing the time consumed. To solve this problem, you can create a document fragment, all the new additional summary on it, then the contents of the document fragment disposable added to the document.

 

 document.createComment (create a note)

var Zhuxi = document.createComment ( "annotation content");   // Create an annotation content

 

 Note: The node created above need xx.appendChild () method added to the page. Except document.write.

 

 

 

Creating efficient node

innerHTML

the innerHTML: used to set or get the contents inside the start and end of the current label 

html document: <div ID = "dd"> <P> 321 <P> </ div>
 
Script Document 1:   // Set 

var dd = Document .getElementById ( "dd" );
 var STR = "<P> text. 1 </ P>" 
+ "<h1 of> title node </ h1 of>" 
+ "<H2> subtitled node </ H2>" ; 
dd. the innerHTML = STR;          // original div elements are replaced inside the 

script document 2:   // Get 

var dd = document.getElementById ( "dd" ); 
the console.log (dd.innerHTML);     // Get the value of < p> 321 <p>

 

 outerHTML

outerHTML: it returns to the calling element and all child nodes of HTML tags 

html document: <div ID = "dd"> 321 </ div>
 
Script document. 1: 

var dd = document.getElementById ( "dd" ); 
the console.log ( dd.outerHTML);     // return value <div ID = "dd"> 321 </ div> 

Script document 2: 

var dd = document.getElementById ( "dd" ); 
dd.outerHTML = "<P> Clear all the original value, this becomes </ P> ";     // the original value is 321.

 

 interText

interText: Set or get the text objects located in the start and end tags. 

html document: <div ID = "dd"> <P> 321 <P> </ div>
 
Script Document: // Get target document 

var dd = document.getElementById ( "dd" ); 
the console.log (dd.innerText) ;           // print 321 

Script document 2:    // set the target document 

var dd = document.getElementById ( "dd" ); 
the console.log (dd.innerText); 
dd.innerText = "<P> replace all original text </ the p-> ";      // screen display div, <p> replace all the original text </ p>, p tags will be displayed as a document 

Note: Firefox does not support the label, but there are similar label textContent

 

 OuterText and the difference innerText

outerText: innerText obtain the document with the same set are not the same, such as, 

HTML document: <div ID = "dd"> <P> 321 <P> </ div>
 
Script Document: 

var dd = document.getElementById ( "dd" ) ; 
the console.log (dd.innerText); 
dd.outerText = "<p> replace all original text </ P>";     // screen remains displayed <p> replace all original text </ p>, but the original div has ceased to exist, leaving only the text <p> replace all the original text </ p>

 

 

 

Parent-child node searches

Parent looking for child nodes

Find a first child node: firstChild 

find the last child: lastChild 

  find the n-th node: the childNodes [n -1]　　// from zero count 

  to find the n-th node: childNodes.item (n -1)　　// from zero count

 

Find the child node parent

Find parent: parentNode

 

Child nodes to find siblings

Find the next sibling node: nextSibling 

find a sibling: previousSibling

 

To find the document root

Direct lookup of the document root: var Gen = document.documentElement; 

directly to find the root of the document: var Gen = p.ownerDocument;       // now = the Document Gen 

tagName: returns the attribute tag name.  // such as, console.log ( "gen.tagName"); printing out the root node. 

Element name .hasChildNodes ();    // determine whether the element has a child node, returns a Boolean value. Including text nodes. 

 

the console.log (gen.children [I]); // print out i + 1 nodes, text nodes not included, began to count from 0 

var Shu = gen.childElementCount;   // calculating the number of nodes with non-text nodes

 

 

 

Class array of objects

A NodeList array object class, into an array, and then add a node.

 

HTMLCollection of (Get Class array of objects)

var script = document.scripts;  //获取当前html里面所有的script

var links = document.links;  //返回当前html中所有的a标签链接

var cells = document.getElementById("tr").cells;  //获取当前html中，所有的td元素

var imgs = document.images;  //获取当前html中，所有的图片

var forms = document.forms;  //获取当前html中，所有的表单

var options = document.getElementById("select").options;  //获取当前html中，所有的option选项

var ps = document.getElementsByTagName("p");  //获取当前html中，的所有p标签的内容

以上的值返回的都是HTMCollection

 

类数组对象NameNodeMap

 

类数组对象的动态性

Nodelist，HTMLcollection, NamedNodeMap 三个集合都是 动态的, 是有生命、有呼吸的对象

它们实际上是基于DOM结构动态执行查询的结果,因此DOM结构的变化能够自动反映这些对象中

每当文档结构发生变化时,它们都会得到更新。因此,它们始终都会保存着最新、最准确的信息

 

 

 

获取节点

IE6 到 IE8 也兼容
getElementById()
getElementsByName()
getElementsByTagName()

IE9 或以上
getElementsByClassName()
querySelector()
querySelectorAll()

 

操作节点

<ul id="abc">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>

 

appendChild() 

appendChild()  //为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点。

如：要为上面ul添加一个li

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var text = document.creatTextNode(‘4’);   //创建文本节点4

var li = document.createElement(‘li’);   //创建li元素

li.appendChild(text);    //给li元素填入文本节点4

ul.appendChild(li);    //给ul元素填入刚才的li元素

 

insertBefore()  

insertBefore()  //在指定的已有节点之前插入新的子节点

如：要为上面<li>2</li>前面插入一个新节点

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var text = document.creatTextNode(‘4’);   //创建文本节点4

var lia = document.createElement(‘li’);   //创建li元素

lia.appendChild(text);    //给li元素填入文本节点4

var lib = abc.children.item(1);   //获取第二个子节点

abc.insertBefore(lia,lib);    //lia为要插入的节点，插入的位置是lib的前面，若是lib写成null，则效果跟appendChild一样。

 

replaceChild()

replaceChild(要插入的节点，被替换的节点)   //用新的节点替换某个子节点，返回值是被替换的子节点

如：要为上面<li>3</li>替换成<li>4</li>

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var text = document.creatTextNode(‘4’);   //创建文本节点4

var lia = document.createElement(‘li’);   //创建li元素

lia.appendChild(text);    //给li元素填入文本节点4

var lib = abc.children.item(2);   //获取第3个子节点

abc.replaceChild( lia,lib );   //lia是要插入的节点，lib是被替换的节点。

 

cloneNode() 

cloneNode(true/false)   //节点的拷贝，返回该副本。不填时为false，false表示只拷贝当前节点的标签元素，不拷贝子节点；true表示连同子节点一起拷贝。

如：拷贝一份ul到当前的body里面

var abc = document.getElementById(‘abc’);   //获取ul元素对象

var clone = abc.cloneNode(true);    //连同子节点一起拷贝

document.body.appendChild(clone);     //拷贝的节点要有父节点，没有父节点的话得通过appendChild、insertBefore、replaceChild等方式进行添加

 

normalize() 

 

normalize()    //合并相邻的text节点

var div = document.creatElement(‘div’);   //创建一个div

var text = document.creatTextNode(‘123’);    //创建第一个文本节点

div.appendChild(text);     //把第一个文本节点添加到div里面

var text2 = document.creatTextNode(‘456’);    //创建第二个文本节点

div.appendChild(text2);    //把第二个文本节点添加到div里面

document.body.appendChild(div);   //在body显示div

 

 

 

//可以看见右边调试工具的文本节点有两个的

div.normalize();   //这样我们就能把两个节点合并为一个节点了

 

 

 

splitText() 

splitText()    //按照指定位置把一个文本节点分割为两个文本节点，返回新的文本节点

var div = document.creatElement(‘div’);   //创建一个div

var text = document.creatTextNode(‘123456’);    //创建一个文本节点

div.appendChild(text);     //把文本节点添加到div里面

var fen = div.firstChild.splitText(3);   //从第4个开始分割，包含第四个。

console.log(div.firstChild.nodeValue);   //控制台打印出第一个文本节点，即123

 

 

 

删除节点

<ul id="abc">
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>

 

removeChild() 

removeChild()   //删除某个节点，括号必须传入要删除的节点，返回删除的节点

如：删除上面<li>1</li>节点

var  abc = document.getElementById(‘abc’);   //获取ul元素id

var del = abc.removeChild(abc.childNodes[1]);   //删除第二个节点，上面一共7个节点，7个节点里面包含空白节点

 

removeNode()

removeNode()   //ie私有，参数是布尔值，默认为false。false时只删除改节点，true时连同子节点一起删

如：删除上面的ul节点，不删子节点

var  abc = document.getElementById(‘abc’);   //获取ul元素id

var del = abc.removeNode();

如：删除上面的ul节点，连同子节点

var  abc = document.getElementById(‘abc’);   //获取ul元素id

var del = abc.removeNode(true);

 

removeChild()与innerHTML的区别

removeChild()，在ie6-8删除后还可以调用；在chrome删除后还可以调用

innerHTML，在ie6-8删除后还不可以调用；在chrome删除后还可以调用

ps：调用指的是元素对应的方法，而不是元素本身