JavaScript finishing--dom

Last Update:2018-07-06 Source: Internet

Author: User

Tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

DOM: The Document Object model, which is also a programming interface for HTML and XML documents, is simply an interface, but is implemented in JavaScript.

Any document can be drawn into a tree-like structure, such as

Document--> is an object, and this object refers to this document.

There are a few methods below the document object that can be used to get to a node or group of elements:

document.getelementsbyid () //by ID (IE8 and below, get element ID is case-insensitive)
document.getElementsByTagName () //Gets a set of elements through a tag name, even if there is only one element that is encapsulated into an object (class array object, which can be used directly as an array)
Span style= "font-size:18px" > Document.getelementsbyname () //through the Name property, the old version of the browser is only partially labeled (the form label) so that the Name property itself is only added to the form in development
document.getelementsbyclassname () //Get a set of elements through the class name, if you want to get only one of them so write Document.getelementsbyclassname () [x] x for subscript
document.gueryselector ("CSS selector") //If there are multiple only get the first
document.gueryselectorall ("CSS selector")

the last two methods have drawbacks and are basically not used:

1.ie7 and below are not supported

2. Non-real-time to the current state as the standard, the subsequent additions and deletions will not be changed, that is, non-real-time

In the DOM, the document is a collection of nodes, and the nodes are divided into different types. three types of nodes: element node text node comment node

1. ELEMENT nodes : such as

2. text node : written text such as <div> content </div> div as element node, content is text node

3. Note Node : The text in your comments

Node:

ParentNode//parent NodeFirstChild//first child nodeLastChild//Last child nodeNextSibling//Next Sibling nodePreviousSibling//Previous sibling nodeParentelement//parent Element Element nodeChildren//child element ELEMENT nodesFirstelementchild//first child element nodeLastelementchild//Last child element nodePreviouselementsibling//previous sibling element nodeNextelementsibling//Next sibling element nodeChildren.length//number of child element nodesChildelementcount//is the number

Properties of the node:

The name of the NodeName node can only be read and cannot be modified
The contents of the NodeValue node, the content of the text node and the comment node, are readable and modifiable
NodeType node type

Element node--1 attribute node--2 text node-->3 comment node-->8 document-->9 documentfragment--> Document node fragment-- >11

Method: HasChildNodes () Determine if there are child nodes

Knowing the properties and methods of the node, let's take a look at a topic: encapsulate a function, remove all element nodes, and not use children

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Document</title></Head><Body>    <Div>        <span></span>        <P></P>        <ahref=""></a>    </Div></Body></HTML>

vardiv = document.getelementsbytagname ("div") [0];//get element Nodefunctiongetelement (Div) {varnodes = Div.childnodes;//Get child nodes    varElementnode = [];//element node definition array     for(vari = 0;i<nodes.length;i++) {//Loop Node       if(Nodes[i].nodetype = = 1) {//If the node type is 1Elementnode.push (Nodes[i]);//Put node 1 nodes into an array of element nodes       }    }                returnElementnode;//returns an array of ELEMENT nodes}console.log (getelement (div))//output Element Node

Where the DOM method exists:

1. getElementById () defined above Document.prototype, element above cannot be used

2.getElementsByName () defined above Htmldocument.prototype, XML cannot use this method

3.getELementsByTagName () defined above Document.prototype and Element.prototype

4.htmldocument.prototype above defines a number of properties body head

document.head--> refers to the head tag

Document.body--> refers to body tag

5.document.prototype the documentelement attribute is defined above

document.documentelement--> referring to HTML tags

6.getElementsByClassName (), Queryselector (), Querselectoeall (), Documenet,prototype and elment.prototype are defined above

DOM Operations

Create node: (only node created, but not inserted into the page)

document.createelement () creating ELEMENT nodes

var div = document.createelement ("div"= "This is the div that was just created"

document.createTextNode () Creating a text node

var text = document.createTextNode ("Hello World");

Document.createcomment () Creating a comment node

var comment = document.createcomment ("This is comment")

insert operation:

Parent.appendchild ()//select parent element, insert as last child element, insert page existing element, for clip operation

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Document</title></Head><Body>    <Divclass= "Divbox">        <span>This is span</span>        <ahref="">This is a</a>        <P>This is P</P>    </Div>    <Divclass= "Divbox2">Hello World</Div></Body></HTML>

var divbox = document.getelementsbyclassname ("Divbox") [0];//Gets the element node of class Divbox var divbox2 = Document.getelementsbyclassname ("Divbox2") [0];//Gets the element node Divbox.appendchild (DIVBOX2) class for Divbox2; Select Divbox as the parent, divbox2 as the last child element to insert

Parent.insertbefore (b) Insert a before B

Delete operation:

Parent.removechild () is not really a delete, but just take it out, there are other places to use this node will be automatically restored

Child.remove () Real Delete

Replace operation:

parent.replacechild (new,old) Replace old with new

The difference between InnerHTML, innertext and Textcontext:

InnerHTML: Refers to the HTML judgment in the element

InnerText: Plain text old version of Firefox does not support

Textcontext: Plain text old version of IE does not support

JavaScript finishing--dom

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More