First, DOM
1.DOM isthe short name of the Document Object Model. When a Web page loads, you can convert the structured document into a tree of objects in memory.
to put it simply DOM is not a technology, but an idea to access structured documents. With the Dom model, we can Modify, delete, and add to the DOM tree to make the structured document dynamic.
a node in a DOM model--a document can be said to be a collection of nodes. There are 3 Types of nodes in the DOM model:
- ELEMENT nodes: Various tags are the names of these element nodes, such as <p>,<ul> , etc.
- Text nodes: Text nodes are always included inside the element node
- Attribute node: Typically used to decorate an element node is called an attribute node.
Second, how the DOM accesses HTML
Dom has two main ways of accessing HTML.
- according to ID access HTML element: Call the getElementById () method through the document object to find a unique The element of the id attribute value.
<title> Untitled document </title><style> </style> <script type= "Text/javascript" >functionShow () {varContent1=document.getelementbyid (' Son1 '). InnerText; varContent2=document.getelementbyid (' Grandson2 '). Value; varContent3=document.getelementbyid (' Grandson3 '). Value; varContent4=document.getelementsbyclassname (' Grandson4 '). Value; Alert (Content1+ "\ n" +content2+ "\ n" +content3+ "\ n" +content4); } </script>The first way
- 2. Access with node relationships HTML element. The common properties and methods are as follows:
ParentNode |
Returns the parent node of the current node |
PreviousSibling |
Returns the previous sibling node of the current node |
NextSibling |
Returns the next sibling node of the current node |
ChildNodes |
Returns all child nodes of the current node |
FirstChild |
Returns the first child node of the current node |
LastChild |
Returns the last child node of the current node |
getElementsByTagName (TagName) |
Returns all child nodes of the current node with the specified label name |
<!doctype html>/*taking Zhao Liu as the reference material*/#n4 {color:red}</style>varCurrent=document.getelementbyid ("N4"); functionshowcontent (target) {alert (target.innerhtml); } functionShowcount () {alert (document.getElementsByTagName ("Li"). length); }</script></body>The second wayJS Basic 10-dom Access HTML method