JavaScript study notes (2) (DOM and BOM)

DOM tree

1. Find HTML elements

1. Find by id

!+s: find a single element

var x=document.getElementById("intro");

2. Find by tag name

+s: find multiple elements

var y=document.getElementsByTagName("p");

3. Find by class name

+s: find multiple elements

var x=document.getElementsByClassName("intro");

4. In particular, we can also change the corresponding attributes of the label by finding the element

document.getElementById(id).attribute=新属性值
//如：
document.getElementById("image").src="xxx.jpg";

5. If you need to change the HTML style

document.getElementById(id).style.property=新样式
//如：
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

6. The DOM can also be triggered by events

<h1 id="id1">我的标题 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

Second, the event

1. Basic events

• onload();//Triggered when the user enters the page
• onunload();//Triggered when the user leaves the page
• onchange();//Use in conjunction with the input text box
• onmouseover();//Triggered when the mouse moves over the label
• onmouseout();//Triggered when the mouse leaves the label
• onmousedown();//Triggered when the mouse is pressed
• onmouseup();//Triggered when the mouse is released
• onclick();//Triggered when the click operation is completed

2. Events can be written in tags or in JS

write in the label

<button onclick="displayDate()">点这里</button>

written in JS

document.getElementById("myBtn").onclick=function(){
    
    displayDate()};

3. Add event monitoring

Grammar↓

element.addEventListener(event, function, useCapture);

The first parameter is the type of event (eg "click" or "mousedown").
The second parameter is the function to be called after the event fires.
The third parameter is a boolean that describes whether the event is bubbling or catching. This parameter is optional.

//Click the button to display the date

document.getElementById("myBtn").addEventListener("click", displayDate);

//Click the button to pop up the box "Hello World!"

element.addEventListener("click", function(){
    
     alert("Hello World!"); });
上下两个代码作用是相同的
element.addEventListener("click", myFunction);
function myFunction() {
    
    
    alert ("Hello World!");
}

//You can add multiple events to the same element without overwriting the original event

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

//You can also add different events to the same element

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

//You can also add events to the windows object
//Add event listeners when the user resets the window size:

window.addEventListener("resize", function(){
    
    
    document.getElementById("demo").innerHTML = sometext;
});

// When passing parameter values, use an "anonymous function" to call a function with parameters:

element.addEventListener("click", function(){
    
     myFunction(p1, p2); });

4. Event bubbling and capture

There are two ways of event delivery: bubbling and catching.

Event delivery defines the order in which element events are fired. If you insert a <p> element inside a <div> element, and the user clicks on the <p> element, which element's "click" event is fired first?

In bubbling, the event of the inner element is triggered first, and then the outer element is triggered, that is, the click event of the <p> element is triggered first, and then the click event of the <div> element is triggered.

In capture, the event of the outer element is triggered first, and then the event of the inner element is triggered, that is: the click event of the <div> element is triggered first, and then the click event of the <p> element is triggered.

The addEventListener() method can specify the "useCapture" parameter to set the delivery type:
the default value of useCapture is false, that is, bubbling delivery, when the value is true, the event is delivered using capture.

addEventListener(event, function, useCapture);

5. The removeEventListener() method
removeEventListener() method removes the event handle added by the addEventListener() method:

element.removeEventListener("mousemove", myFunction);

Third, add, delete, modify and check DOM nodes

1. Create a new HTML element (node) - appendChild()
html

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

js

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);

2. Create a new HTML element (node) - insertBefore()
html

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

js

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);

3. Remove existing elements

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

4. Replace HTML elements - replaceChild()
html

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

js

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);