JavaScript HTML DOM node common user interface elements

In the Document Object Model (DOM), each node is an object. DOM node has three important properties:

Name of the node: 1. nodeName

2. nodeValue: value node

3. nodeType: node type

Node Type: element 1, property 2, text 3, Note 8, 9 document.

First, add and delete nodes (HTML elements)

1, create a node

1) Create the element (element node);

2) adds the element to an existing element.

Syntax: appendChild (newnode)

eg:

<div ID = "DIV1"> 
<P ID = "P1"> This is a paragraph </ P> 
<P ID = "P2"> This is another paragraph </ P> 
</ div> 

<Script> 
var para document.createElement = ( "P"); 
var = document.createTextNode Node ( "this is a new paragraph."); 
para.appendChild (Node); 

var = document.getElementById Element ( "DIV1"); 
element.appendChild (para ); 
</ Script>

document.createElement ( "tag name"); // Create an element node

document.createTextNode ( "Text"); // Create a text node

appendChild (); // a method of adding a child node to the last node. You may also be used appendChild () method of a mobile element from an element to another element. Usage: a.appendChild (b), the add b to a.

2. Add Nodes

appendChild (); // add a new child node after the last child of the specified node list node.

Grammar, eg: ditto.

insertBefore (); // insertBefore () method can be inserted in front of the existing child node a new child node.

语法: insertBefore (newnode, node);

eg:

<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>

<script type="text/javascript">
var otest = document.getElementById("test");
var newli = document.createElement("li");
newli.innerHTML="php";
//otest.insertBefore(newli,otest.lastChild);
otest.insertBefore(newli,otest.childNodes[1]);
</script>

3. Delete Node

removeChild () // removeChild () method to remove a node from the list of child nodes. Such as the deletion is successful, this method returns the removed node, such as a failure, NULL is returned.

语法: nodeObject.removeChild (node)

eg:

<div ID = "DIV1"> 
<P ID = "P1"> This is a paragraph. </ P> 
<P ID = "P2"> This is another paragraph. </ P> 
</ div> 

<Script> 
var parent = document.getElementById ( "DIV1"); 
var = Child document.getElementById ( "P1"); 
parent.removeChild (Child); 
</ Script>

DOM need to be aware of the need to remove the element and its parent element. First find the child element you want to delete, and then use its properties to find parentNode parent element.

4. Replace node

replaceChild // replace a given parent element inside a child node to another child node.

Syntax: referencre = element.replaceChild (newChild, oldChild); // newChild: Required for the replacement target oldChild. oldChild: necessarily, be replaced newChild object.

eg:

<div> 
<B ID = "oldnode"> the JavaScript </ B> is a commonly used technique, is made dynamic page. </ div> 
<a href="javascript:replaceMessage()" rel="external nofollow"> The bold italics </a> 

<Script type = "text / JavaScript"> 
function replaceMessage () { 
　　var B = document.getElementById ( "oldnode"); 
　　var = document.createElement the newNode ( "I"); 
　　newNode.innerHTML = b.innerHTML; 
　　b.parentNode.replaceChild (the newNode, B); 
} 
</ Script>

Note: When oldnew is replaced, all the attributes associated with the content will be removed. newChild must first be established.

5. Access sub-node

childNodes // access a list of all the selected child nodes under the element node, the value returned can be seen as an array, he has length property.

Syntax: elementNode.childNodes // available childNodes [i] represents an array of several sub-elements

eg:

<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var int=document.getElementsByTagName("div")[0].childNodes;
for (var i=0;i<int.length;i++)
{
document.write("名字："+int[i].nodeName+"<br>");
}
document.write("子节点个数："+int.length+"<br>");
</script>

6. The first and last term access child nodes

firstChild // Returns 'childNodes' first child array. If the selected node has no children, this property returns NULL.

Syntax: node.firstChild // and elementNode.childNodes [0] is the same effect.

lastChild // Returns 'childNodes' first child array. If the selected node has no children, this property returns NULL.

Syntax: node.lastChild // and elementNode.childNodes [elementNode.childNodes.length-1] is the same effect.

eg：

<div id="con">
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write("第一个子节点："+x.firstChild.nodeName+"<br>");
document.write("最后一个子节点："+x.lastChild.nodeName);
</script>

7. Access parent

parentNode // Gets the node's parent

语法: elementNode.parentNode

eg:

<div id="text">
<p id="con"> parentNode 获取指点节点的父节点</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>

Note: Only one parent, browser compatibility issues, the gap between browser tabs chrome, firefox, etc. can be considered a text node.

8. Access siblings

Followed after nextSibling // to return to a node (in the same tree hierarchy).

Syntax: nodeObject.nextSibling

Followed before a return can previousSibling // node (in the same tree hierarchy).

Syntax: nodeObject.previousSibling

eg:

<ul the above mentioned id = "myList"> 
<li the above mentioned id = "ITEM1"> Coffee </ li> 
<li the above mentioned id = "item2"> Tea </ li> 
</ ul> 
<the p-the above mentioned id = "Demo"> Click the button to get under the first project of a compatriot. </ P> 
<Button the onclick = "myFunction ()"> try </ Button> 
<Script> 
function myFunction () 
{ 
var X = document.getElementById ( "Demo"); 
x.innerHTML = document.getElementById ( "ITEM1 ") .nextSibling.innerHTML; 
} 
</ Script>

Note: If no such node, this property returns null. Two properties acquired by the node. Internet Explorer will ignore whitespace text nodes (for example, line feed) generated between nodes, while other browsers will not be ignored.

Solution to Problem: determining whether the node nodeType 1, the case for the element node, skip.

That's all for this article, I want to help learning

You may also be interested in the article:

Article simultaneous release: https://www.geek-share.com/detail/2775368631.html

JavaScript HTML DOM node common user interface elements

You may also be interested in the article:

Guess you like