1. with Element And without the difference

a)  belt Element Gets the element node

b)  Without the possibility of getting text nodes and attribute nodes

  1. Get all the child nodes

a)   . childNodes

b)   . children

c)   . parentNode . children [ Indexes ]

  1. . children: Get all child nodes
  2. opacity:0-1; transparency
  3. alpha(opacity: percentage );IE6/7/8 transparency
  4. Bind events first, then loop
  5. previousNode() Last sibling node
  6. alert( Variable name ) Testable variable names can be used
  7. obtain body,var body = document.body;

There are two ways to set styles

style

  1. In line expressions can be obtained and printed out
  2. Embedded and outside the chain can not get
  3. Use when there are few styles
  4. Hump naming rules
  5. style Properties are object properties
  6. The value is a string type , When it's not set, it's “ An empty string ”
  7. .style. cssText = “ String style ”

 Simple exercises on menus 
 style The practice of attributes 
 Change the size and transparency of the box 
 Text box get focus highlight 
 Advanced interlacing 
 Baidu skin 
 The way to hide the box 
 Positioning and hierarchy 

dom How to create elements

1.documrnt.write(“<li></li>”)

A)  script Write there, create there

B)  Will be covered

2.parentNode.innerHTML += “<li></li>”

3. Existing nodes .appendChild( Node created ); Append a new node to The last part of the existing node

var ul = document.getElementsByTagName('ul')[0];          // Get the existing element
var li = document.createElement('li');                            // Create a li label
var liText = document.createTextNode(' I am a LI label '); // Create a text node
ul.appendChild(li);                                                    // hold li The tag is appended to ul Back most
li.appendChild(liText);                                            // Append text node to li In the label

4. Existing nodes .insertBefore( Node created , A child node of an existing node ); Create... Before the children of an existing node A new node

var ul = document.getElementsByTagName('ul')[0];                 // Get the existing element
var li = document.createElement('li');                             // Create a li label
var liText = document.createTextNode(' I am a LI label ');   // Create a text node
li.appendChild(liText);                                               // Append text node to li In the label
var list = document.getElementsByTagName('li')[2];     // obtain ul A child node of
ul.insertBefore(li,list);                                           // Add in list Before the label

5. Delete    Parent node .removeChild( Child nodes to delete );

A)  var ul = document.getElementsByTagName('ul')[0];      // Get the existing element
var li = document.createElement('li');                            // Create a li label
var liText = document.createTextNode(' I am a LI label '); // Create a text node
var list = document.getElementsByTagName('li')[2];     // obtain ul A child node of
ul.removeChild(list);                                               // Delete ul Inside list node

list.parentNode.removeChild(list);                       // Now I see list Parent element of , Deleting in progress , You can not define a parent element

6. Replace   Parent node .replaceChild( New node , Old node );

A)  var ul = document.getElementsByTagName('ul')[0];     // Create a text node
var li = document.createElement('li');                            // Create a li label
var liText = document.createTextNode(' I am a LI label '); // Create a text node
li.appendChild(liText);                                                // Append text node to li In the label
var list = document.getElementsByTagName('li')[2]; //replaceChild Replacement node
ul.replaceChild(liText,list);                                      //liText Replace it with list

7. clone   var
Variable = The cloned node .cloneNode(true);  ( If true Change it to false, Then an empty node will be cloned )

var newNode = li.cloneNode(true);              // Clone a li Nodes give variables newNode

ul.appendChild (newNode);                         // Add the cloned node to ul after

dom Element creation 
 Operation of element 
 Create a list of , Highlight 
 Wish the wall 
 Choose fruit 

JS-DOM ~ 03. Operation of child nodes 、style. Styles and properties 、dom Element creation method and operation 、14 An example is 、 Mainly to make use of js Direct control html More articles on attributes

  1. JS Get the child node of

    stay JS There are several ways to get child nodes in : firstElementChild.firstChild.childNodes and children Let's analyze the difference between these methods through an example ( obtain div Under the p label ) transport ...

  2. 5 month 25 Japan -js operation DOM Traverse child nodes

    One . Traversal node Traverse child nodes children();// Get all the direct subclasses of the node Traversing peer nodes next(); prev(); siblings();// All the peer elements *find(); Find a match from a descendant element ...

  3. js DOM Node tree Set up style Style attribute

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. JS Add child nodes

    var fragment = document.createDocumentFragment(); li = document.createElement('li'); li.className = ...

  5. js Recursively get all the parent nodes of the child node , Deep traversal to get the first subtree

    Front end requirements . recursive Depth first traversal algorithm // Find all the parents of a node familyTree (arr1, id) { var temp = [] var forFn = function (arr, i ...

  6. JS Find traversal child node elements

    function nextChildNode(node,clazz,tagName){ var count= node.childElementCount; for(var i=0;i<coun ...

  7. js Regular matching html In the tag style Style and img label

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  8. js Learning notes 14----DOM Concept and sub node type

    1. Concept DOM:Document Object Model--- Document object model file :html page Document object : Elements in the page Document object model : It's a definition , In order to make the program (js) To manipulate the elements in the page . DOM ...

  9. js jquery Get elements ( Parent node , Child node , Brother node ), Element screening

    Reprint :https://www.cnblogs.com/ooo0/p/6278102.html js jquery Get elements ( Parent node , Child node , Brother node ) One ,js Get elements ( Parent node , Child node , Brother node ) ...

Random recommendation

  1. bzoj2325 [ZJOI2011] The battle of Daoguan

    Description Pokemon ( Also known as wonder baby or pet elf ) red / blue / The water channel Pavilion in the emerald needs to go through three ice fields to reach the owner , Every piece of ice in the ice field can only pass through once . When all the ice on an ice field is passed by , To the next ...

  2. angularJS Judge

    Judgment statement : ng-switch on ng-switch-when ng-switch-when ng-if=”person.sex==1“ <ul> <li ng-repeat=” ...

  3. InputStreamReader Garbled reading file

    When you read a text file , If it's written in a computer notebook , Then save . Use InputStreamReader Read out , And it's read in his coding format , There's still a lot of garbled code , For example, the text content is “ Hello ”, It reads out to be “? ...

  4. EEPlat PaaS Overall scheme and technical principle

    EEPlat PaaS The platform provides a high-speed development platform based on metadata driven configuration , A complete multi tenant implementation is provided at the same time , Each tenant has its own independent application and database , The application and data are completely isolated between tenants . EEPlat PaaS flat ...

  5. Yes struts2 Some understanding

    1.strust2 What is the frame ? In order to solve what problems appear ? Struts2 Is in WebWork+xwork From the development of the foundation . 2. strust2 The advantages and disadvantages of : Support Ajax Support Ognl label Provides a powerful interceptor ...

  6. install FP

    One . install Oracle 11.2 64-bit database 1. Install the database software and SEINESCM Restore the database to the server , 2. Configure monitoring and TNS Information Two . mount this database 32 Bit client ( by SSIS Matching use of ). install ORA ...

  7. pip install Yellowfin Failure problem

    The above method is simple and effective https://blog.csdn.net/quqiaoluo5620/article/details/80608474

  8. C# receive form More than one in the form is the same name Value problem

    I used to receive form The value of the form is directly used FormCollection Or custom class to receive , When there are multiple identical Name Will be automatically used “,” separate , So there's a problem , The value itself contains “,” It's more difficult to deal with . So the solution is ...

  9. Tornado An overview of the architecture of

    One .Tornado An overview of the architecture of Two .Application Class detailed analysis : #!/usr/bin/env python # -*- coding: utf8 -*- # __Author: "S ...

  10. POJ-1830

    Switch problem Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6294   Accepted: 2393 Description ...