Node type
nodeType
Here are some important nodeType values:
1: Element element
2: Attr
3: Text text
8: Comments
9: Document document
nodeName,nodeValue
Node relationship
childNodes: Each node has a childNodes property, which holds a NodeList object
firstChild: equivalent to childNodes[0]
lastChild: equivalent to childNodes.length-1
At the same time, other nodes in the same list can be accessed by using the previousSibling and nextSibling properties of each node in the list.
Operation node
appendChild()
The appendChild() method is used to add a node to the end of the childNodes list. After adding a node, the relationship pointers of the new node, the parent node and the last child node of childNodes will be updated accordingly.
insertBefore()
insertBefore() method accepts two parameters: the node to be inserted and the node to be referenced.
// After insertion, it becomes the last child node returnedNode = someNode.insertBefore(newNode,null);// After insertion, it becomes the first node returnedNode = someNode.insertBefore(newNode,someNode.firstChild);// Insert before the last child node returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
replaceChild()
replaceChild() accepts two parameters, the node to be inserted and the node to be replaced
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
removeChild()
Only remove and not replace nodes.
var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()
item 1
item 2
item 3
var deepList = myList.cloneNode(true);console.log(deepList.length); // 3var shallowList = myList.cloneNode(false);console.log(shallowList.childNodes.length); //0
Document Type
The Document node has the following characteristics:
Children of the document
var html = document.documentElement; // Get a reference to <html> console.log(html === document.childNodes[0]); // trueconsole.log(html === document.firstChild); // true
Document information
// Get the title of the document var originalTitle = document.title; // Set the document title document.title = "New page title";// Get the complete urlvar url = document.URL;// Get the domain name var domain = document.domain;// Get the urlvar referrer = document.referrer;// Assume that the page comes from the p2p.wrox.com domain document.domain = "wrox.com"; // Successful document.domain = "nczonline.net"; // Failed
Call document.getElementById("myElement"); the result will return the <input> element as shown below;
The best way is to not make the name attribute of the form field the same as the ID of other elements.
<input type="text" name="myElement" value="text field"><div id="myElement">a div</div>
Special collection
Document writing
<html><head> <title>document.write() Example 3</title></head><body> <script type="text/javascript"> document.write("<script type=/"text/javascript/" src=/"file.js/">") + "<//script>"); </script></body></html>Strings<//script> will not be regarded as closed tags for external script tags, so there will be no unnecessary content on the page.
Element type
The Element node has the following characteristics:
To access the tag name of an element, you can use the nodeName attribute or the tagName attribute;
<div id="myDiv"></div>var div = document.getElementById("myDiv");console.log(div.tagName); // DIVconsole.log(div.nodeName); // DIVif (element.tagName=="div") { // You cannot compare like this, it is easy to make errors}if (element.tagName.toLowerCase =="div") { // This is best (for any document)}Get features
There are three main DOM methods for operating characteristics, namely getAttribute(), setAttribute(), and removeAttribute();
Note that the attribute name passed to getAttribute() is the same as the actual attribute name. Impression: To get the attribute value of class, you should pass in "class" instead of "className".
var div = document.getElementById("myDiv");console.log(div.getAttribute("class")); // bdCreate elements
Use the document.createElement() method to create a new element.
Children of the element
Before performing an operation, you usually need to check the nodeType property first, as shown in the following example:
for (var i=0; len = element.childNodes.length; i<len; i++){ if (element.childNodes[i].nodeType ==1) { // Perform some operations}}Text Type
Text nodes have the following characteristics:
Create a text node
You can use document.createTextNode() to create a new text node.
Normalized text nodes
Normalize()
Split text nodes
splitText()
Comment Type
The comment node has the following characteristics:
DOM operation technology
Operation form
// Create tablevar table = document.createElement("table");table.border = 1;table.width = "100%";// Create tbodyvar tbody = document.createElement("tbody");table.appendChild(tbody);// Create the first line tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));// Create the second line tbody.insertRow(01);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));document.body.appendChild(table);Selector API
querySelector() method
// Get the body element var tbody = document.querySelector('body');// Get the element with ID "myDIV" var myDIV = document.querySelector("#myDiv");// Get the first element with class "selected" var selected = document.querySelector(".selected");// Get the first image element with class "button" var img = document.body.querySelector("img.button");querySelectorAll() method
// Get all <em> elements in a <div> (similar to getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em");// Get all elements of class "selected" var selecteds = document.querySelectorAll(".selected");// Get all <strong> elements in all <p> elements var strongs = document.querySelectorAll("p strong");HTML5
Class-related extensions
getElementsByClassName() method:
This method can be called through the document object and all HTML elements.
// Get all the elements containing "username" and "current" in the class. The order of class names does not matter var allCurrentUsernames = document.getElementsByClassName("username current");// Get all elements with class name "selected" in the element with ID "myDiv" var selected = document.getElementById("myDiv").getElementsByClassName("selected");Focus Management
HTML5 also adds the function of assisting in managing DOM focus. The first is the document.activeElement property, which always refers to the element in the DOM that has currently gained focus.
var button = document.getElementById("myButton");button.focus();alert(document.activeElement === button); // trueBy default, when the document is just loaded, the document.activeElement is stored in the document.activeElement with a reference to the document.body element. During document loading, the value of document.activeElement is null.
In addition, the document.hasFocus() method has been added, which is used to determine whether the document has gained focus.
var button = document.getElementById("myButton");botton.focus();alert(document.hasFocus()); // true