HTML DOM learning

By: Mirror Wang Yuyang

E-mail: [email protected]

Blog home page: https: //www.cnblogs.com/wangyuyang1016/

DOM Document Object Model

DOM is simply a document object model, when an HTML page is loaded HTML page will be created DOM

DOM object tree

JavaScript "right":

Change the page (DOM) used HTML elements
Change the page (DOM) used in HTML attributes
Change the page DOM CSS styles used
Add / Remove used in HTML DOM elements, attributes, and CSS style attributes
To respond to the pages of all existing HTML event
You can create a new event in the DOM HTML

DOM features:

The entire HTML page document is a document node (there is only one <html> root element)
Each HTML tags within an element node
Each HTML text in the element is a text node
Each HTML content attribute is attribute node
Notes contents belong comment node

DOM node:

doucument Document nodes; root parent HTML document, DOM document
element Element nodes; element node has its own attribute node
attr Attribute node; as a parent node to element
text Text node; may exist as a separate node, the end node is
conmment Comment node; class information interpretation of HTML comment

The document object

Gets the element object:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h3>I love HCIT</h3>
        <div id="info" class="bd">
            <h2>Hello,World!</h2>
            <h3>I'am Mirror王宇阳 is student</h3>
        </div>
        <script>
            var id = document.getElementById("info");
            var tag= document.getElementsByTagName("h3");// 全局
            var idtag = id.getElementsByTagName("h3"); // div_info标签中的h3
            var classt = document.getElementsByClassName("bd");
            
            console.log(id);
            console.log(tag[0]);
            console.log(idtag[0].innerHTML);
            console.log(classt);
            console.log(classt[0].innerHTML);
        </script>
    </body>
</html>

document.getElementsById()

Returns the element specifies the name of the tag ID

document.getElementsByName()

Returns the element specifies the name of the label Name

document.getElementsByTagName()

Returns the elements of the specified type name tag

document.getElementsByClassNam()

Returns the element specifies the name of the label Class

The above-mentioned four common method to get the element object labels, do not have absolute uniqueness

When we get the element object label elements, the method returns all the content you are looking at an array of return

We need to use an array subscript way to get read only element

Further, we can use the relationship between nodes to the elements label acquisition to regulate and control, such as:
what we acquired element th tag in the div table in, then we use
the getElementsByTagName () method to get all th tags, then HTML page myriad th tag will be acquired
, we can use getElenemtsById () to locate the target div tag, and then through getElementsByTagName () method to get th tag element

Object element W properties:

1573632737286

innerHTML

Represents text and HTML code contained in the element content

innerText

It represents plain text between the start and end tags

outerHTML

HTML and text content of the entire DOM node, including the tag itself

outerText

It represents plain text between the start and end tags

DOM object node operation:

Creating nodes

createElement (): creates an element node

Returns a new node object reference parameter is the name of the element node label created

var newElement = document.createElement("a"); // 创建一个<a>标签元素节点

createTextNode (): Create a text node

Returns a new node object reference parameter is the string and add a text node

var newText = document.createTextNode("百度一下");//创建一个baidu文本节点

createAttribute (): Creating an attribute node

Returns a new node object reference, the parameter is the attribute name of the new node.

Attribute node must request to the parent node class node element element

var newAttr = document.createAttribute("href"); //创建一个color属性节点
newAttr.value = "http://www.baidu.com";

Add Nodes

appendChild()

A method to add a new node belongs tail node, the child node object parameter is newly added;

For adding an element node, text node

newElement.appendChild(newText);// newElement节点添加文本节点newText
document.body.appendChild(newElement);// body标签中添加newElement节点

setAttributeNode()

Add a new attribute node belongs to the property set methods in the node, the parameters for the newly added child node object;

newElement.setAttributeNode(newAttr);//newElement添加newAttr属性节点

insertBefore()

insertBefore(node1,node2);

The new node is inserted into the front node1 opposite node as a method node2 belongs node's children

Delete Node

removeChild()

Delete nodes, the node parameters is the need to remove the node; relevant node object of this process is the parent node of node

element.removeChild(node);

Replacement Node

replaceChild()

element.replaceChild(node1,node2);

node2 node1 node to replace the original node; relevant node object of this process is the parent node of node

Copy nodes

cloneNode()

Assigning a node, the node returns the reference copy; parameter is a Boolean value, true / false indicating whether yo clone child of that node.

element.cloneNode(bool);

The return value is a clone of the node

var node = newElement.cloneNode(true); //复制一个节点

Navigation node

firstChild : Returns the first child node target content

console.log(d1.firstChild.innerHTML);

lastChild : Returns the last child node object content

console.log(d1.lastChild.innerHTML);

parentNode : Returns the child node of the parent object

console.log(d1.parentNode);

childNodes : Returns a collection of all the child node object

console.log(d1.childNodes)
console.log(d1.childNodes.length)

children : Returns the object element child set of objects

console.log(d1.children)
console.log(d1.children.length);

nodeType : Returns the node type (1- 3- text node element nodes)

for (var i = 0 ; i < demo.childNodes.length ; i++) {
    if (demo.childNodes[i].nodeType == 3) {
        textNode ++;
    } else if(demo.childNodes[i].nodeType == 1){
        elementNode ++;　
    }
}

DOM events

Event triggers

Event Properties	Event Description	trigger
onblur	When losing focus	Keyboard, mouse, blur method
onfocus	Has the focus	Keyboard, mouse, focus method
onchange	When modify the contents	Keyboard, mouse, assignment
onclick	When click the mouse	Keyboard, mouse, click method
ondblclick	Mouse double-click	mouse
onkeydown	Keyboard Press	keyboard
onkeypress	Keyboard keys (press / release)	keyboard
onkeyup	Lift the keyboard	keyboard
onmousedown	Mouse pressed	mouse
onmousemove	When the mouse is moved	mouse
onmouseup	When the mouse lifted	mouse
onMouseOut	When the mouse is moved	mouse
onmouseover	When the mouse moved	mouse
onload	When loaded	system
onsubmit	When the form is submitted	Keyboard, mouse, submit method
onreset	When a form is reset	Keyboard, mouse, reset method

event object properties

When an event occurs will produce the event object, the event object is used to obtain critical information recording events when the role was

Attributes	Explanation	condition
altKey、ctrlKey、shiftKey	Did you press Alt, Ctrl, Shift key	Keyboard and mouse
button	Mouse button is pressed	mouse
keyCode	When the keyboard keys unicode value	keyboard
clientX, clientY	Mouse in the window area have coordinates	mouse
offsetX、offsetY	Mouse coordinates relative to a trigger event	mouse
srcElement	Event triggered by	event