Hello, everyone. I am Zhang Xuefei, an honest, pure and kind-hearted Web programmer, a student of the 22nd session of Beijing General Institute of IT Xiuzhen

Today, I’m going to talk about deep thinking –What is the meaning of each request in network or headers?

1. Background

DOM (Document Object Model) is an API (application programming interface) for HTML and XML documents. To trace the DOM

A hierarchical tree of nodes is drawn, allowing developers to add, remove, and modify portions of the page. DOM, based on a

Netscape and Microsoft pioneered DHTML (dynamic HTML), but now it has become a real crossover for the presentation and manipulation of page markup

Platform and language neutral approach.

The DOM1 specification became a W3C recommendation in October 1998, providing an interface for basic document structure and queries. In this chapter the main

We’ll discuss dom1-level features and applications related to HTML pages in browsers, and JavaScript implementations of Dom1-level.

Internet Explorer, Firefox, Safari, Chrome, and Opera all implement DOM perfectly.

2. Knowledge analysis

What is the DOM

DOM stands for Document Object Model.

DOM is a platform – and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.

In the HTML DOM, everything is a node. The DOM is HTML that is treated as a tree of nodes.

DOM node

Everything in an HTML document is a node. The entire document is a document node, each HTML element is an element node,

Text within an HTML element is a text node, each HTML attribute is an attribute node, and a comment is a comment node.

Common DOM operations

Find nodes

The new node

Add a node

Remove nodes

Modify the node

The element type we use the most is the element type, which represents HTML elements and provides access to the element’s tag name, child nodes, and attributes.

Examples of common DOM operations

Find nodes

Document.getelementbyid (‘ ID attribute value ‘);

Returns a reference to the first object with the specified ID

The document/element. GetElementsByClassName (‘ class attribute value);

Returns a collection of objects with the specified class

The new node

Document.createelement (‘ element name ‘);

Create a new element node

Document.createattribute (‘ Attribute name ‘);

Create a new property node

Document.createtextnode (‘ Text content ‘);

Create a new text node

Document.createcomment (‘ comment node ‘);

Create a new comment node

document.createDocumentFragment( );

Create the document fragment node

Common DOM operations

Add a node

Element. innerHTML=’ Add text content ‘





Creating a text node


Creating a text node


functionaddText(){


varelement=document.getElementsByTagName(‘p’)[0];


Element. innerHTML=’ Add text content ‘; // Insert text content


}


Common DOM operations


Remove nodes


parentNode.removeChild( existingChild );


To delete an existing child node, the return value is Delete node


Element.removeattribute (‘ Attribute name ‘);


Deletes an attribute with the specified attribute name. No value is returned


element.removeAttributeNode( attrNode );


Deletes the specified property and returns the deleted property


Common DOM operations


Modify the node


Add attribute node and modify attribute value:


element.setAttribute( attributeName, attributeValue );


Copy the code


An attribute node


Add the ID attribute and modify the class attribute value


varelement=document.getElementsByTagName(‘p’)[0];


// Add an attribute node


varattr=document.createAttribute(‘id’);


attr.value=’idValue’;


element.setAttributeNode(attr);


// Modify attribute values


varattr=document.createAttribute(‘class’);


attr.value=’classNewValue’;


element.setAttributeNode(attr);


DOM events


Allows JavaScript to react to HTML events


Onclick event – when the user clicks


Onload event – the user enters


Onunload Event — User exits


Onmouseover event – mouseover


Onmouseout event – Mouse out


Onmousedown event – Mouse down


Onmouseup event – Mouse up


3. Frequently Asked Questions


How do I invoke elements through class and tag? How do I set its properties?


4. Solutions


It is common for a page to have multiple elements of the same class, as well as multiple elements of the same label, when called as follows










div2


document.getElementsByClassName(“time”)[0].innerHTML = “16:43”;


document.getElementsByClassName(“time”)[1].innerHTML = “16:44”;


document.getElementsByTagName(“div”)[0].className = “text-time”;


5. Coding


Let’s run the code shown on the previous page to change the content and style of the HTML using the DOM.


6. Expand your thinking


Html5 adds features to help manage DOM focus. The first is the Document.ActiveElement property,


This attribute always refers to the element in the DOM that is currently in focus.


Another addition is the document.hasfocus () method, which is used to determine whether a document is in focus.


7. References


Reference # 1: JavaScript Advanced Programming


Reference two: DOM tree knowledge combing


8. More discussion


How to write HTML content properly and manipulate it with DOM?





thanks

 


Thanks for watching


Thanks to ooze fix | KouChenDi | Cao Yue This tutorial is in her share technology on the basis of perfecting.


PPT


Link: Link:


https://pan.baidu.com/s/1o8R0FtK


Password: evqs


———————————————————————————————————————— ——————


Skill tree.IT Monastery


“We believe that everyone can become an engineer. From now on, find a senior to guide you to the entrance, control the pace of your own learning, and no longer feel confused on the way to learning.”


Here is the skill tree.IT Shuzhen Institute, where thousands of brothers find their own learning route, learning transparent, growth visible, brothers 1 to 1 free guidance. Come and study with me!


There’s a surprise here