JavaScript DOM

DOM node

The entire document is a document node

Each HTML element is an element node

The text inside an HTML element is a text node

Each HTML attribute is an attribute node

Comments are comment nodes

HTML DOM node count

HTML DOM treats HTML documents as a number structure, this structure is called node number

Through the HTML DOM, all nodes in the tree can be accessed through JavaScript, all HTML elements (nodes) can be modified, and nodes can be created or deleted

Node parent, child and sibling

In the node count, the top node is called the root element (root)

Every node has a parent except the root

A node can have any number of children

Siblings have the same parent node

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <h1>题目</h1>
        <p>内容</p>
    </body>
</html>

The <html> node has no parent, so it is the root node

The parent nodes of <head> and <body> are <html> nodes

The parent of the text node "content" is the node

<html> has two child nodes: <head> and <body>

The <head> node has one child: the <title> node

The <title> node has one child: the text node "title"

The <h1> and nodes are siblings and children of <body>

The <head> element is the first child of the <html> element

The <body> element is the last child of the <html> element

The <h1> element is the first child of the <body> element

The element is the last child of the <body> element

HTML DOM methods

createAttribute() creates an attribute node

createElement() creates an element node

creteTextNode() creates a text node

appendChild() adds a new node to the specified node

insertBefore() inserts a new child node before the specified child node

removeChild() removes child nodes

replaceChild() replaces child nodes

getAttribute() returns the specified attribute value

setAttribute() sets or modifies the specified attribute to the specified value

HTML DOM attributes

innerHTML gets the text value of the node

The innerHTML property is useful for getting or replacing the content of an HTML element

parentNode Get the parent node of the node

childNodes gets the child nodes of the node

attributes Get the attribute node of the node

firstChild returns the first child node

内容

element node

var d = document.getElementById("p")

d.nodeType //1

d.nodeName //P

d.nodeValue //null

property node

var d = document.getElementById("p").getAttributeNode("name")

d.nodeType //2

d.nodeName //name

d.nodeValue //kang

text node

var d = document.getElementById("p").firstChild

d.nodeType //3

d.nodeName //#text

d.nodeValue //content

HTML DOM access

getElementById() gets the element with the specified ID

文本

docuemt.getElementById("xiu")

getElementsByTagName() gets all elements with the specified tag name

Text

document.getElementsByTagName("p")

getElementsByClassName() gets all elements of the specified class name

文本

document.getElementsByClassName("xiu")[0]

HTML DOM modification

Create HTML content

内容

document.getElementById("p").innertHTML = "Modify content"

Change HTML style

内容

document.getElementById("p").style.color = "red"

Create new HTML element

var xiu = document.createElement("p") //Create p tag

var kang = document.createTextNode("content") //Create text content

xiu.appendChild(kang) //Add text content to p tag

Guess you like