Original link: https://www.kai666666.com/2022/07/24/%E3%80%8AJavaScript-DOM-%E7%BC%96%E7%A8%8B%E8%89%BA%E6%9C %AF%E3%80%8B%E5%B0%8F%E8%AE%B0/
- HTML comments can be used in Script blocks in HTML, even without endings. For example, the following code can run normally.
1
2
3
4
5
|
< script type = "text/JavaScript" >
console.log ( 1 );
<!-- print 1 1 after running -->
console.log ( 1 );
</ script >
|
1
2
3
4
5
|
< script type = "text/JavaScript" >
console.log ( 2 );
<!-- print 2 2 after running
console.log ( 2 );
</ script >
|
2. Common DOM operations:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
document .getElementById(elementId); // Get the DOM element by id
document .getElementsByTagName(tagName); // Get elements by tagName
document .getElementsByClassName(classNames); // Get elements by classNames
dom.setAttribute(name, value); // set the value of the attribute
dom.getAttribute(name); // Get the value of the attribute
dom.childNodes; // Get child elements
dom.nodeType; // Get node type 1: element node 2: attribute node 3: text node
textNode.nodeValue = 'text' ; // modify the value of the text node
document .write(text); // write the full page to the document
dom.innerHTML; // Get the HTML text in the DOM
dom.innerHTML = text; // set the HTML in the DOM
dom.innerText; // Get the text in the DOM (omit HTML tags)
dom.innerText = text; // set the text in the DOM
document .createElement(nodeName); // create an element
document .createTextNode(text); // create a text node
dom.appendChild(node); // append a node
dom.insertBefore(node, child); // Insert the node before the child element of the parent element dom
dom.style.fontSize = value; // set the style
|
3. Different ways to set properties:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// set value to input
inputDom.setAttribute( 'value' , value);
inputDom.value = value;
// set image value to img
imgDom.setAttribute( 'src' , src);
imgDom.src = src;
// set value href to a
aDom.setAttribute( 'href' , href);
aDom.href = href;
// set value class to dom
dom.setAttribute( 'class' , className);
dom.className = className;
|
4. Open a small window of 320px * 480px:
1
|
window .open(url, "popup" , "width=320,height=480" );
|
5. Implement an addLoadEvent function that supports adding multiple window.onload functions:
1
2
3
4
5
6
7
8
9
10
11
|
function addLoadEvent ( func ) {
var oldonload = window.onload;
if ( typeof window .onload != 'function' ) {
window.onload = func;
} else {
window.onload = function ( ) {
oldonload();
func();
}
}
}
|
6. Implement an insertAfter function to support appending elements to an element:
1
2
3
4
5
6
7
8
|
function insertAfter ( newElement, targetElement ) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
|
7. Implement an addClass function to append the class name to the specified node:
1
2
3
4
5
6
7
8
|
function addClass ( element, value ) {
if (!element.className) {
element.className = value;
} else {
element.className += " " ;
element.className += value;
}
}
|
8. Implement a moveElement animation function that can move the specified element to the target position:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
twenty four
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
function moveElement ( elementID, final_x, final_y, interval ) {
if (! document .getElementById) return false ;
if (! document .getElementById(elementID)) return false ;
var elem = document.getElementById (elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px" ;
}
if (!elem.style.top) {
elem.style.top = "0px" ;
}
var xpos = parseInt (elem.style.left);
var ypos = parseInt (elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true ;
}
if (xpos < final_x) {
var dist = Math .ceil((final_x - xpos)/ 10 );
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math .ceil((xpos - final_x)/ 10 );
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math .ceil((final_y - ypos)/ 10 );
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math .ceil((ypos - final_y)/ 10 );
ypos = ypos - dist;
}
elem.style.left = xpos + "px" ;
elem.style.top = ypos + "px" ;
var repeat = "moveElement('" +elementID+ "'," +final_x+ "," +final_y+ "," +interval+ ")" ;
elem.movement = setTimeout(repeat,interval);
}
|
9. Use JavaScript to set the specified picture as a black and white picture, and the picture will turn into color when the mouse passes:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
twenty one
twenty two
twenty three
twenty four
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
function convertToGS ( img ) {
// store the original image
img.color = img.src;
// store the black and white image
img.grayscale = createGSCanvas(img);
// Switch the image when the mouse is over and removed
img.onmouseover = function ( ) {
this.src = this.color ;
}
img.onmouseout = function ( ) {
this.src = this.grayscale ;
}
}
function createGSCanvas ( img ) {
var canvas= document .createElement( "canvas" );
canvas.width=img.width;
canvas.height=img.height;
var ctx=canvas.getContext( "2d" );
ctx.drawImage(img, 0 , 0 );
// Note: The getImageData method can only take effect in a web environment, and an error will be reported when opening HTML directly with a browser
var c = ctx.getImageData( 0 , 0 , img.width, img.height);
for (i= 0 ; i<c.height; i++) {
for (j= 0 ; j<c.width; j++) {
var x = (i* 4 ) * c.width + (j* 4 );
var r = c.data[x];
var g = c.data[x+ 1 ];
var b = c.data[x+ 2 ];
c.data[x] = c.data[x+ 1 ] = c.data[x+ 2 ] = (r+g+b)/ 3 ;
}
}
ctx.putImageData(c, 0 , 0 , 0 , 0 , c.width, c.height);
return canvas.toDataURL();
}
// Note: You need to see the effect in the web environment
window.onload = function ( ) {
convertToGS( document . getElementById( 'avatar' ));
}
|
This article is reproduced from: https://www.kai666666.com/2022/07/24/%E3%80%8AJavaScript-DOM-%E7%BC%96%E7%A8%8B%E8%89%BA%E6%9C %AF%E3%80%8B%E5%B0%8F%E8%AE%B0/
This site is for inclusion only, and the copyright belongs to the original author.