Organize the common operations of JavaScript on various types of elements in the DOM basics

Node type
NodeType
Here are some important NodeType values:
1: Elemental Element
2: Attribute attr
3: Textual text
8: Note comments
9: Document Documents

Nodename,nodevalue

Node relationship
ChildNodes: Each node has a ChildNodes property, which holds a NodeList object

FirstChild: equal to Childnodes[0]

LastChild: Equal to Childnodes.length-1

You can also access other nodes in the same list by using the PreviousSibling and NextSibling properties of each node in the list.

Operations Node
appendchild ()

The AppendChild () method is used to add a node to the end of the ChildNodes list. After the node is added, the relationship pointers for the new childnodes, the parent node, and the last child node are updated accordingly.

InsertBefore ()
InsertBefore () This method takes two parameters: the node to be inserted and the node to be referenced.

After inserting becomes the last child node
returnednode = Somenode.insertbefore (newnode,null);

After inserting becomes the first node
returnednode = Somenode.insertbefore (newnode,somenode.firstchild);

Insert in front of the last child node
returnednode = Somenode.insertbefore (newnode,somenode.lastchild);

Repacechild ()
Repacechild () accepts two parameters, the node to insert and the node to replace

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); 3

var shallowlist = Mylist.clonenode (false);
Console.log (shallowList.childNodes.length); 0

Document type

The document node has the following characteristics:

• The value of NodeType is 9;
• The value of nodename is #document;
• The value of the nodevalue is null;
• The value of the parentnode is null;
• The value of the ownerdocument is null;

Child nodes of the document

var html = document.documentelement; Get a reference to  
 

Document Information

Gets the title of the document
var originaltitle = document.title; 

Set the document title
Document.title = "New page title";

Get the full URL
var url = document. URL;
Obtain domain name
var domain = document.domain;
Gets the URL of the source page
var referrer = document.referrer;

Suppose the page comes from the p2p.wrox.com domain
document.domain = "wrox.com";//success
document.domain = "nczonline.net";//Failure

Call document.getElementById ("MyElement") in IE7; The result returns the <input> element, as shown below;
The best way to do this is to not let the name attribute of a form field be the same as the ID of another element.

<input type= "text" name= "myelement" value= "text field" >
<div id= "MyElement" >a

Special Collections

• Document.anchors, containing all a elements with the name attribute in the document;
• Document.forms, which contains all form elements in the document, the same result as the document.getElementsByTagName ("form");
• Document.images, which contains all the IMG elements in the document, has the same results as document.getElementsByTagName ("img");
• Document.links, containing all a elements of the document with the HREF attribute;

Document Write

The string <\/script> will not be used as the closing tag for the external script tag, so there is no extra content in the page.

Element type
The element node has the following characteristics:

• The value of NodeType is 1;
• The value of the nodename is the label name of the element;
• The value of the nodevalue is null;
• ParentNode may be document or element;

To access the label name of an element, you can use the NodeName property, or you can use the TagName property;

<div id= "mydiv" ></div>
var div = document.getElementById ("mydiv");
Console.log (Div.tagname); Div
Console.log (div.nodename);//div


if (element.tagname== "div") {//No such comparison can be easily error
}

if ( Element.tagName.toLowerCase = = "div") {//This is best (applies to any document)
}

Get characteristics
the DOM method of operation characteristic has three main, respectively is GetAttribute (), setattribute (), RemoveAttribute ();
Note that the attribute name passed to GetAttribute () is the same as the actual attribute name. To get the attribute value of class, the impression should be passed into "class" instead of "ClassName".

var div = document.getElementById ("mydiv");
Console.log (Div.getattribute ("class")); Bd

Creating elements
Use the Document.createelement () method to create a new element.

Child nodes of the element
before performing an operation, it is usually necessary to check the NodeType property first, as in the following example:

for (var i=0; len = element.childNodes.length; i<len; i++) {
  if (Element.childnodes[i].nodetype ==1) {
    //execute certain exercises As
  }
}

Text type
The text node has the following characteristics:

• The value of NodeType is 3;
• The value of the nodename is "#text";
• The value of the NodeValue is the text contained by the node;
• ParentNode is an element;

Create a text node
You can use document.createTextNode () to create a new text node.

Normalize text nodes
Normalize ()

Split text node
Splittext ()

Comment Type
The comment node has the following characteristics:

• The value of NodeType is 8;
• The value of the nodename is "#comment";
• The value of the NodeValue is the content of the annotation;
• ParentNode may be document or element;
• Do not support (NO) sub-points;

DOM Manipulation Technology
Action table

 CREATE TABLE
var table = document.createelement ("table");
Table.border = 1;
Table.width = "100%";

Create Tbody
var tbody = document.createelement ("tbody");
Table.appendchild (tbody);

Create the first row of
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 a second row of
Tbody.insertrow (a);
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 ');

Gets the element
var mydiv = document.queryselector ("#myDiv") with the id "mydiv";

Gets the first element of the class "selected"
var selected = Document.queryselector (". selected");

Gets the first image element of the class "button"
var img = document.body.querySelector ("Img.button");

Queryselectorall () method

Gets all <em> elements in a <div> (similar to getElementsByTagName ("em"))
var ems = document.getElementById ("Mydiv"). Queryselectorall ("em");

Gets all elements of the class "selected"
var selecteds = Document.queryselectorall (". selected");

Gets all <strong> elements in all <p> elements
var strongs = Document.queryselectorall ("P Strong");

HTML5
extensions associated with a class
Getelementsbyclassname () method:
This method can be invoked through the Document object and all HTML elements.

Gets the elements in all classes that contain "username" and "current". The order of the class name does not matter
var allcurrentusernames = document.getelementsbyclassname ("username current");

Gets all elements with the class name "selected" in the element with id "mydiv"
var selected = document.getElementById ("mydiv"). Getelementsbyclassname ( "Selected");

Focus Management

HTML5 also adds the ability to assist in managing DOM focus. The first is the Document.activeelement attribute, which always references the element in the DOM that is currently gaining focus.

var button = document.getElementById ("MyButton");
Button.focus ();
Alert (document.activeelement = = button); True

By default, a reference to the Document.body element is saved in the document.activeelement when the document is just loaded. The value of docuemnt.activeelement is null during document loading.
Another is the new Document.hasfocus () method, which is used to determine whether the document has the focus.

var button = document.getElementById ("MyButton");
Botton.focus ();
Alert (Document.hasfocus ()); True