# DOM and BOM operation
Review link: http://c.biancheng.net/view/9360.html
Event object: https://www.runoob.com/jsref/dom-obj-event.html
## Get to know DOM
DOM --> Document Object Model --> Document Object Model --> Operate web page content through js
The first few lessons learned the basic grammar of JavaScript. There may be a sense of fragmentation during the learning process (no connection with html/css). From this lesson, it is connected with the previous knowledge points. Let js and html through
dom /css generate links
DOM tree --> All content (pictures, texts, styles) in a web page document is stored in a tree structure in the bottom layer of the web page. The end of each branch in the tree is called a node (node). Each node belongs to a object (properties/methods)
The content of the web page is stored in the program in a tree structure. Each element is an object. It has its own corresponding properties and methods. The Document object
is the root of the DOM tree. It is the root node of all nodes. It can be accessed through Document everything on the page
The operation of web page elements is divided into two steps:
1. Find the element
2. Perform operations on the element
## How to select DOM elements
Element -- Element
function syntax is basically a small hump (the first word is not capitalized, and the second word begins initial capital letter)
1. Get element by id
document.getElementById() // Get element by id name
2. Get element by class
document.getElementsByClassName() // Get element by class name
3. Get element by tag name
document.getElementsByTagName() // Get element by tag name
The default value of the obtained element is HTMLCollection. It is similar to an array, but it is not an array.
Same: data has the concept of subscript/data can be traversed. Different:
It cannot use array methods
. For this reason, if you directly perform dom operations on pseudo-arrays It is invalid. What we want to operate is not this pseudo-array, but the elements in the pseudo-array. So we need to add subscripts to access the corresponding elements ## DOM operation text
content
innerText: read/modify the text content in the element ( Do not recognize tag syntax)
innetHTML: read/modify the text content in the element (recognize tag syntax)
## DOM operation element attribute/style
Operate element attribute --> After getting the element, operate it by the element name.
Element name. Attribute name // Use element attribute
Element name. Attribute name = XXX /// Modify element attribute
Element name.title // Set/get the title of the element
Element name.src // Set/get the resource path of the element
Element name.className // Set/get the class name of the element
Manipulate element style (css) --> After getting the element, operate it by means of element name.style.style name
element name.style.style name// access the css style of the element
Element name.style.width // Access the width style of the element
If the css style has a (-) minus sign as a connector. When writing in js, do not write the connector but use the small hump nomenclature
font-size --> fontSize
background-color --> backgroundColor
## Interactive event The (event)
event refers to the operation when the user interacts with the web content:
press the keyboard/click the mouse/double-click the mouse/enter text.
When these events are triggered, the interaction can be obtained through the JavaScript listener. and run the corresponding function
Event flow:
1. Get the event object --> What will be the basis for interaction
2. Bind the listening event -->
Event object. Listening event = function(){} When the event is triggered, execute the function in the function
box.onclick = function(){function code} --> When the box is clicked, the function is triggered
After getting the element, you can use this to represent the current object.
code block:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
< title>Document</title>
</head>
<body>
<p>
What is dom operation? Interact with html<br>
1. Get html tags and return an element object<br>
2. Set value/change value<br></p>
<input id="inp1" type="text" value="aa">
<ul id="ul1">
<li>1-a-12</li>
<li>2-b-13 </li>
<li>3-c-14</li>
</ul>
<button onclick="changeTest()">Replace button</button>
<ul>
<li>The onclick attribute represents a click event attribute< /li>
<li>The onclick attribute value is a function name ()</li>
<li>Indicates that once the button is clicked, this function is called</li>
</ul>
</body>
<script>
// 1. Single setting
//1. Get
let inp1=document.getElementById('inp1')
//2. Set value
inp1.value='Cao Cao'
//2. Batch setting
let arr2=[
{id:1, name:'Cao Cao',age:36},
{id:2,name:'Liu Bei',age:34},
{id:3,name:'Sun Quan',age:30},
]
//1. Get ul
let ul1=document.getElementById('ul1')
function changeTest(){
//2、替换
let s=''
arr2.forEach((e)=>{
s+=`<li>${e.id}-${e.name}-${e.age}</li>`
})
ul1.innerHTML=s
}
</script>
</html>
Qiangsheng Group Case:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
button{ width: 100px; height: 40px; /* left margin*/ margin- left: 40px; /* Remove the border*/ border: none; /* Remove the outline*/ outline: none; /* Rounded corners*/ border-radius: 8px; color: white;font-size: large;
cursor: pointer;
}
.fb>button:nth-child(1){ background-color: rebeccapurple; } .fb>button:nth-child(2){ background-color:red; } . fb>button:nth-child(3){ background-color: green; } .fb>button:nth-child(4){ background-color: blue; } /* Each tr in tbody changes color alternately*/ tbody >tr:nth-child(odd){ background-color: skyblue; } tbody>tr:nth-child(even){ background-color: rgb(227, 181, 62); } </style> </head> <body> <h1 style="text-align: center;">Qiangsheng Group employee salary table</h1>
<h3 style="text-align: center;">Qiangsheng Group's business philosophy: The bigger the storm, the more expensive the fish</h3>
<div class="fb" style="text-align: center;">
<button onclick ="generateTab()">Generate table</button>
<button onclick="doubleSalary()">Double salary</button>
<button onclick="restEmp()">Retirement</button>
<button onclick= "sumSalary()">Total salary</button>
</div>
<table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0">
< thead>
<tr>
<th><a href="javascript:orderEmp('id')">序号</a></th>
<th>姓名</th>
<th><a href="javascript:orderEmp('age')">年龄</a></th>
<th><a href="javascript:orderEmp('salary')">薪资</a></th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>Gao Qiqiang</td>
<td>36</td>
<td>200</td>
</tr>
</tbody>
<tfoot id="tfoot">
<tr style="text-align: center;">
<td colspan="4">Total salary: </td>
</tr>
</tfoot>
</table>
</body>
<script>
let emps=[
{ id:1,name:'Gao Qiqiang',age:36,salary:200},
{id:2,name:'Gao Qisheng',age:30,salary:300},
{id:3,name:'Tang Xiaolong' ,age:35,salary:100},
{id:4,name:'Tang Xiaohu',age:35,salary:100}, {id:
5,name:'Chen Tai',age:66,salary:100 },
]
//Get
let tbody=document.getElementById('tbody')
let tfoot=document.getElementById('tfoot')
function generateTab(){ //call function
createTab(emps)
}
//Repeated code, encapsulated into a function
function createTab(arr){ let s='' arr.forEach((e)=>{ s+=`<tr> <td>${e. id}</td> <td>${e.name}</td> <td>${e.age}</td> <td>${e.salary}</td> </tr>` }) tbody.innerHTML=s } let newEmps; function doubleSalary(){ //After the salary is doubled, return a new array newEmps=emps.map((e)=>{ e.salary*=2 return e }) //call function createTab(newEmps) } //retire function function restEmp(){ let newEmps=emps.filter((e)=>{ return e.age>65 }) //call function
createTab(newEmps)
}
//salary sum
function sumSalary(){ let salarySum if(newEmps){ salarySum=newEmps.reduce((sum,e)=>{ return sum+=e.salary },0) }else{ salarySum =emps.reduce((sum,e)=>{ return sum+=e.salary },0) } console.log(salarySum) tfoot.innerHTML= `<tr style="text-align: center;"> <td colspan="4">Total salary: ${salarySum}</td> </tr>` } //Sorting let a=true function orderEmp(type){ a=!a //Each call, a negates let newEmps2 switch(type){ case 'id': console.log('Sort by id')
newEmps2=emps.sort((e1,e2)=>{ return a? e2.id-e1.id : e1.id-e2.id }) break; case 'age': console.log('Sort by age' ) newEmps2=emps.sort((e1,e2)=>{ return a? e2.age-e1.age : e1.age-e2.age }) break; case 'salary': console.log('sort by salary ') newEmps2=emps.sort((e1,e2)=>{ return a? e2.salary-e1.salary : e1.salary-e2.salary }) break; } //Call the function createTab(newEmps2) that generates tbody }
</script>
</html>
```