In-depth JavaScript DOM application

This time I will bring you in-depth JavaScript DOM application,What are theprecautionswhen using JavaScriptDOM application, the following is a practical case, let's take a look.

What is DOM:
Document, node! In fact, it is all about the same thing. In CSS, it is called a label, in JS, it is called an element, and in DOM, it is called a node;

Browser support
IE:10% Chrome:60% FF:99% Support

DOM node
childNodes: child node
nodeType: type of node

nodeType == 3 -> Text node

nodeType == 1 -> Element node

childNodes and nodeType are used together

   
 
 
 
 
 
abcdefg //文本节点abcdefg //元素节点

Get child nodes
children:he Only includes elements, no text, compatible with all browsers
So the above example can be written like this, simple and crude!!!

for (var i=0;i
        

         Copy after login
        
       

parentNode: parent node
Example: click on the link to hide the entire li
parentNode example:

   
 
11111隐藏
 
22222隐藏
 
33333隐藏
 
44444隐藏

offsetParent
Example: Get the actual position of the element on the page
Mainly used for positioning, get the actual parent node of the element.

Example One: Setabsolute positioningto the second div2, and set nothing to the parent node div1 of div2, then the offsetParent of div2 is body.

Example 2: Give the second div2 Set absolute positioning and set relative positioning for the parent node div1 of div2, then the offsetParent of div2 is div1.

2.DOM node (2)

First and last child node

There are compatibility issues

firstChild、firstElementChild lastChild 、lastElementChild //IE6-8 //oUl.firstChild.style.background='red'; //高级浏览器 //oUl.firstElementChild.style.background='red';

Usage examples

 
1
 
2
 
3

Sibling nodes (use the same as above)

There are compatibility issues

nextSibling, nextElementSibling

previousSibling, previousElementSibling

3. Manipulate element attributes

ElementAttribute operation
First type: oDiv.style.display=' block';
Second type: oDiv.style['display']='block';
Third type: Dom method: oDiv2.setAttribute('display','none');

DOM way to operate element attributes
Get: getAttribute(name)
Set: setAttribute(name, value)
Delete: removeAttribute(name)

4. Use className to select the element

How to select elements using className

Select all elements

Filter by className conditions
Basic usage

Encapsulate into a function
Advanced usage

5. Create, insert and delete elements

Create DOM elements
createElement(tag name) Create a node appendChild(node) Append a node

Note: appendChild (Node) has two functions:

(1) If this element is created through createElement (tag name), then it can be added directly to the new parent;
(2). If This element has a parent, then 1. Delete the element from the original parent first; 2. Add it to the new parent.

Example: Insert li for ul

Believe After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

In-depth basic application of JavaScript

##8 basic knowledge that must be paid attention to in JS

The above is the detailed content of In-depth JavaScript DOM application. For more information, please follow other related articles on the PHP Chinese website!