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);