The DOM of the three major components of JavaScript

Directory

1. Basic introduction to DOM

1. Basic concepts

2. Composition of DOM

3. DOM tree (family tree)

4. Find elements of the HTML DOM

5. Changing HTML elements

2. DOM node operation

1. Basic introduction

2. Node level

3. Node operation

4. Form object

3. Case

1. Carousel

2. tab

---

1. Basic introduction to DOM

1. Basic concepts

①The full name of DOM is Document Object Model, which means Document Object Model
② It is a standard programming interface for processing Extensible Markup Language (HTML or XML) recommended by the W3C organization.

2. Composition of DOM

DOM Core: The standard model for any structured document.
HTML DOM: A standard model for HTML documents.
XML DOM: A standard model for XML documents.

3. DOM tree (family tree)

4. Find elements of HTML DOM

getElementById(): You can get the element object with ID

<div id="myDiv">wonderful life</div>
<script type="text/javascript">
    var myDiv = document. getElementById('myDiv');
    console. log(myDiv)
</script>

getElementsByTagName(): It can return the object collection with the specified tag name (because it is a collection of objects, so if you want to operate the elements in it, you need to traverse)
getElementsByClassName(): Returns a collection of objects with the specified name (returns an array of elements, not an element)
getElementsByClassName(): returns a collection of element objects according to the class name
querySelector(): Returns the first element object according to the specified selector (the selector inside needs to be marked)
querySelectorAll(): returns elements according to the specified selector

5. Change the HTML element

element.innerHTML =”new content” changes the HTML content of the element
element.innerTEXT = “new content” changes the text content of the element
element.attribute = new value Change the attribute value of the HTML element
element.setAttribute(attribute name, attribute value) Change the attribute value of the HTML element
element.hasAttribute (attribute name) to determine whether the element has the attribute
element.removeAttribute(attribute name) remove element attribute
element.style.property = new style changes the style of the HTML element
visibility attribute visible indicates that the element is visible hidden indicates that the element is invisible
// object.style.visibility=”value”
display attribute none indicates that this element will not be displayed block indicates that this element will be displayed as a block-level element, and there will be line breaks before and after this element
// object.style.display=”value”

2. DOM node operation

1. Basic introduction

Use parent-child sibling node relationship to get elements
Strong logic, but poor compatibility

2. Node level

node.parentNode
The parentNode property returns the parent node of a node, which is the nearest parent node
Returns null if the specified node has no parent
parentNode. childNodes( )
Returns a collection of child nodes including the specified node (including all child nodes, including element nodes, text nodes, etc.), which is an instant updated collection
parentNode. firstChild()
Returns the first child node, or null if not found
parentNode. lastChild()
Returns the last child element node, or null if not found
node.nextSibling()
Returns the next sibling node of the current element, or null if not found
node. previousSibling()
Returns the previous sibling node of the current element, or null if not found
node.nextElementSibling()
Returns the next sibling element node of the current element, or null if not found

3. Node operation

(1) Create a node
document.createElement(‘label name’);
(2) Add nodes
node.appendChild(child);
node.insertBefore(child, specified element) Add an element to the front of a specified element
(3) Delete node
node.removeChild(child); Remove a child node from the DOM and return the removed node
(4) Copy node (clone node)
node.cloneNode() returns a copy of the node on which the method was called. Also known as clone node/copy node
① If the parenthesis parameter is empty or false, it is a shallow copy, that is, only the copied node itself is cloned, and the child nodes inside are not cloned
②If the parenthesis parameter is true, it is a deep copy, which will copy the node itself and all child nodes inside

4. Table object

(1) Table object collection
cells returns an array containing all the cells in the table
rows returns an array containing all the rows in the table

(2) Table object method
deleteRow() deletes a row from the table
insertRow() inserts a new row into the table
td object: represents the data unit in HTML
th object: represents the header unit in the HTML standard.
tr object: represents the row of the HTML table.
cells returns a collection of all

and

elements in the table row
deleteCell() deletes the specified cell in the row
insertCell() inserts an empty element at the specified position in a row

Three. Case

1. Carousel map

// carousel map
var pics = [ //Define an array to save pictures
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg",
"images/11.jpg"
]
var index = 0; //Define a variable to control the array subscript

function piccast() { //The method of carousel image
index + + ; //When this method is executed, the subscript increases and the picture changes accordingly
if (index >= pics. length) {
index = 0; //judgment, if the subscript is greater than the length of the existing elements in the array, then let it play again
}
\t\t\t\t
// $("scroll_number_[index]").className = "bchangecolor";
// } else {
var tank = $("dd_scroll"); //Get the storage location of the picture
tank.src = pics[index]; //Change the src attribute in the picture to replace the picture
// $("scroll_number_[index]").className = "achangecolor";
}
\t\t

function loopShow(i, type) {
var tank = $("dd_scroll"); //Get the storage location of the picture
tank.src = pics[i]; //Change the src attribute in the picture to replace the picture

var myid = $(type.id);
myid.className = "achangecolor";
}

function loopOver(type) {
var myid = $(type.id);
myid.className = "bchangecolor";
}
setInterval("piccast()", 3000);//automatic call


<div class="scroll_mid"> <img src="images/1.jpg" alt="rotating image ad" id="dd_scroll" width="480"
height="400" />
<div id="scroll_number">
<ul>
<li id="scroll_number_1" onmouseover="loopShow(0,this)" onmouseout="loopOver(this)">1</li>
<li id="scroll_number_2" onmouseover="loopShow(1,this)" onmouseout="loopOver(this)">2</li>
<li id="scroll_number_3" onmouseover="loopShow(2,this)" onmouseout="loopOver(this)">3</li>
<li id="scroll_number_4" onmouseover="loopShow(3,this)" onmouseout="loopOver(this)">4</li>
<li id="scroll_number_5" onmouseover="loopShow(4,this)" onmouseout="loopOver(this)">5</li>
<li id="scroll_number_6" onmouseover="loopShow(5,this)" onmouseout="loopOver(this)">6</li>
<li id="scroll_number_8" onmouseover="loopShow(6,this)" onmouseout="loopOver(this)">7</li>
<li id="scroll_number_9" onmouseover="loopShow(7,this)" onmouseout="loopOver(this)">8</li>
<li id="scroll_number_10" onmouseover="loopShow(8,this)" onmouseout="loopOver(this)">9</li>
<li id="scroll_number_11" onmouseover="loopShow(9,this)" onmouseout="loopOver(this)">10</li>
\t\t\t\t\t\t</ul>
</div>

2. Tab

 <style>
.book_type{
float: left;
margin-left: 3px;
background-image:url("../images/dd_book_bg1.jpg");
background-repeat: no-repeat;
width:40px;
height: 23px;
margin-top: 2px;
text-align: center;
cursor:pointer;
}
.book_type_out{
float: left;
margin-left: 3px;
background-image:url("../images/dd_book_bg2.jpg");
background-repeat: no-repeat;
width:40px;
height: 23px;
margin-top: 2px;
text-align: center;
color:#882D00;
font-weight: bold;
cursor:pointer;
}

.book_none{
display:none;
}
.book_show{
display: block;
}
</style>

// Tab
var selctcard = [
"history",
"family",
"culture",
"novel"
]

var content = [
"book_history",
"book_family",
"book_culture",
"book_novel"
]

function bookPutUp(myid) {
for (var i = 0; i < selctcard. length; i ++ ) {
var a = selectcard[i];
var b = content[i];
var c = $(a);
var d = $(b);
if (myid == i) {
c.className = "book_type_out";
d.className = "book_show";
} else {
c.className = "book_type";
d.className = "book_none";
}
}
}

<div class="book_sort">
<div class="book_new">
<div class="book_left">Latest release</div>
<div class="book_type" id="history" onmouseover="bookPutUp(0)">History</div>
<div class="book_type" id="family" onmouseover="bookPutUp(1)">tutor</div>
<div class="book_type" id="culture" onmouseover="bookPutUp(2)">Culture</div>
<div class="book_type" id="novel" onmouseover="bookPutUp(3)">novel</div>
<div class="book_right"><a href="#">More></a></div>
</div>
<div class="book_class" style="height:250px;">
<!--History-->
<dl id="book_history">
<dt><img src="images/dd_history_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">"The Times of China" (Part 1)</font><br />
Author: Shi Yonggang, Zou Ming Editor-in-Chief <br />
Publisher: Writer Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥39.00<br />
Dangdang price: ￥27.00
</dd>
<dt><img src="images/dd_history_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">The humiliation of Chinese history</font><br />
Author: Wang Chongxu <br />
Publisher: Huaxia Publishing House <br />
<font class="book_publish">Published: November 2009</font><br />
Price: ￥26.00<br />
Dangdang price: ￥18.20
</dd>
<dt><img src="images/dd_history_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">"The Times of China" (Part 2)</font><br />
Author: Shi Yonggang, Zou Ming Editor-in-Chief <br />
Publisher: Writer Publishing House <br />
<font class="book_publish"> Published: October 2009</font><br />
Price: ￥38.00<br />
Dangdang price: ￥26.30
</dd>
<dt><img src="images/dd_history_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Sixteen Lectures on Chinese Studies</font><br />
Author: Zhang Yinlin, Lu Simian <br />
Publisher: China Friendship Publishing Company <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥19.80<br />
Dangdang price: ￥13.70
</dd>
</dl>
<!--Tutor-->
<dl id="book_family" class="book_none">
<dt><img src="images/dd_family_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Hey, I know you</font><br />
Author: Lan Hai <br />
Publisher: China Women's Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.80<br />
Dangdang price: ￥17.90
</dd>
<dt><img src="images/dd_family_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Choose a career early</font><br />
Author: (US) Lewin<br />
Publisher: Haitian Press <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥19.30
</dd>
<dt><img src="images/dd_family_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Grandpa and Grandma's "Grandson's Art of War"</font><br />
Author: Fu Jianquan Edited <br />
Publisher: Earthquake Publishing House <br />
<font class="book_publish"> Published: August 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥17.40
</dd>
<dt><img src="images/dd_family_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">One minute to understand children's psychology</font><br />
Author: Hai Yun <br />
Publisher: Zhaohua Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥17.40
</dd>
</dl>
<!--Culture-->
<dl id="book_culture" class="book_none">
<dt><img src="images/dd_culture_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Hey, I know you</font><br />
Author: Lan Hai <br />
Publisher: China Women's Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.80<br />
Dangdang price: ￥17.90
</dd>
<dt><img src="images/dd_culture_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Choose a career early</font><br />
Author: (US) Levin <br />
Publisher: Haitian Press <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥19.30
</dd>
<dt><img src="images/dd_culture_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Grandpa and Grandma's "Grandson's Art of War"</font><br />
Author: Fu Jianquan Edited <br />
Publisher: Earthquake Publishing House <br />
<font class="book_publish"> Published: August 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥17.40
</dd>
<dt><img src="images/dd_culture_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">One minute to understand children's psychology</font><br />
Author: Hai Yun <br />
Publisher: Zhaohua Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥17.40
</dd>
</dl>
<!--Fiction-->
<dl id="book_novel" class="book_none">
<dt><img src="images/dd_novel_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Hey, I know you</font><br />
Author: Lan Hai <br />
Publisher: China Women's Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.80<br />
Dangdang price: ￥17.90
</dd>
<dt><img src="images/dd_novel_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Choose a career early</font><br />
Author: (US) Levin <br />
Publisher: Haitian Press <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥19.30
</dd>
<dt><img src="images/dd_novel_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">Grandpa and Grandma's "Grandson's Art of War"</font><br />
Author: Fu Jianquan Edited <br />
Publisher: Earthquake Publishing House <br />
<font class="book_publish"> Published: August 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥17.40
</dd>
<dt><img src="images/dd_novel_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">One minute to understand children's psychology</font><br />
Author: Hai Yun <br />
Publisher: Zhaohua Publishing House <br />
<font class="book_publish">Published: October 2009</font><br />
Price: ￥28.00<br />
Dangdang price: ￥17.40
</dd>
</dl>
</div>