JavaScript Foundation Reinforcement 6--dom

Source: Internet
Author: User
Tags object model tag name

The DOM operations of this section of JavaScript mainly include the following:

    • Select elements by ID, name, tag name;

    • Get and set element attributes through GetAttribute and SetAttribute;

    • Get the parent element through ParentNode, createelement dynamically create nodes, AppendChild, and removechild dynamically add or remove nodes.

Basic Concepts 2.1.1 What is DOM

Dom is the short name of the Document Object model, the basic idea of which is to parse structured documents (such as HTML and XML) into a series of nodes, which are then composed of a tree structure (DOM tree). All nodes and the final tree structure have a canonical external interface to operate the document in a programming language, so that the DOM can be understood as a programming interface for documents (HTML documents, XML documents).

Strictly speaking, Dom is not part of JavaScript, but manipulating the DOM is the most common task of JavaScript, and JavaScript is the most common language for DOM manipulation, and this chapter describes the implementation and usage of the DOM standard by JavaScript.

2.1.2 nodes

The smallest constituent unit of the DOM is called node, and the tree structure (DOM tree) of a document is made up of different types of nodes.

For HTML documents, there are six main types of nodes:

node name meaning
Document Document node Entire document (Window.document)
DocumentType Document Type Node Type of document
Element ELEMENT node HTML elements (such as
Attribute Attribute node Attributes of HTML elements (e.g. class= "right")
Text Text node Text that appears in an HTML document
DocumentFragment Document Fragmentation Node Fragments of a document
2.2 Selecting document elements 2.2.1 Selecting elements by ID

We can use the method getElementById () to select an element by its ID and manipulate it, such as:

    document. getElementById ( "My_div"). style.height= "100px";  // set my_div height to 100px    // set My_div color to red </script></body>

The height (100px) and color (red) of a div tag with ID My_div is set by getElementById ()

2.2.2 Select elements by name (name) or tag name (TagName)

In addition to selecting elements by ID, we can also use the Getelementsbyname () method or the getElementsByTagName () method to find the element, but if there are multiple labels of the same type, we need the following to confirm:

document. getElementsByTagName ("input") [0].value= "Hello";   // the subscript is [0] to select the 1th input label // the subscript is [1] to select the 2nd input label </script></body>
2.3 node, attribute manipulation, and document traversal 2.3.1 querying and setting properties of elements

You can query and set the attributes of an element through GetAttribute () and SetAttribute ():

class_1 {Height:100px; Width:100px; Background:Red;}.class_2 {Height:100px; Width:100px; Background:Blue;}</style>class= "Class_1" ></div><br/><a>before:</a><script>Document. Write (document.getElementById ("Div_1"). GetAttribute ("class"));//querying the properties of Div_1</script><br/><a>after:</a><script>Document. getElementById ("Div_1"). SetAttribute ("Class", "class_2");//Modify the properties of Div_1 to Class_2document.write (document.getElementById ("Div_1"). GetAttribute ("class"));//querying the properties of Div_1 again</script></body>

The code is visible, the first Div_1 property is Class_1, we can see the result through the getattribute () method;

Then we use the SetAttribute () method to set the Div_1 property to Class_2, and then use the GetAttribute () method query again, the Visible property has changed to Class_2, and the result

2.3.2 Parent Node

The ParentNode () method lets you view and manipulate the parent node of a node, example: Locate the parent node of the element whose ID is demo, and output the name of its class:

class= "Demo-parent" >    <div id= "Demo" >            </div></div><script>     Document. Write (document.getElementById ("Demo"). Parentnode.getattribute ("class")); </script></body>
2.3.3 Creating and inserting nodes

Before you know JavaScript, you might think that an HTML page is written like that, and it's fixed.

But JavaScript can dynamically create and insert nodes in the page, which requires the createelement (), AppendChild () method, which is to create nodes and insert nodes, respectively.

For example: Create a div and set its height (100px) and background color (red) and append it to body:

var mydiv = document.createelement (" div ");    Mydiv. style.height = "100px";    Mydiv. Style.background = "Red";    Document. getElementsByTagName ("body") [0]. appendchild (mydiv); </script></body>
2.3.4 Deleting a node

In addition to creating, we can also delete a node through the RemoveChild () method:

function  remove_red () {    var obj = document.getElementById ("div _red ");    Obj. parentnode. removechild (obj);    } </script><button onclick= "remove_red ()" >remove Red div</button></body>

Click the button "Remove red div" to delete the Red section of the page

JavaScript Foundation Reinforcement 6--dom

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.