DOM

Comments

Document Object Model

Node type constants

ConstantValueDescription
Node.ELEMENT_NODE1An Element node like <p> or <div>
Node.TEXT_NODE3The actual Text inside an Element or Attr
Node.CDATA_SECTION_NODE4A CDATASection, such as <!CDATA[[ … ]]>
Node.PROCESSING_INSTRUCTION_NODE7A ProcessingInstruction of an XML document, such as <?xml-stylesheet … ?>
Node.COMMENT_NODE8A Comment node, such as <!-- … -->
Node.DOCUMENT_NODE9A Document node
Node.DOCUMENT_TYPE_NODE10A DocumentType node, such as<!DOCTYPE html>
Node.DOCUMENT_FRAGMENT_NODE11A DocumentFragment node
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()
    
Property									Node					NodeType
document									#document			DOCUMENT_NODE
document.documentElement	html					ELEMENT_NODE
document.head							head					ELEMENT_NODE
document.body							body					ELEMENT_NODE

.parentNode
.parentElement

.childNodes
.firstChild
.lastChild
.children 
.firstElementChild
.lastElementChild

.previousSibling
.nextSibling
.previousElementSibling
.nextElementSibling

.createElement()
.createTextNode()
node.textContent
node.innerHTML

node.appendChild(newNode)
node.insertBefore(newNode, oldNode)
node.replaceChild(newNode, oldNode)

node.removeChile()
node.remove()

element.hasAttribute()
element.getAttribute()
element.setAttribute()
element.removeAttribute()

element.className
element.classList.add()
element.classList.toggle()
element.classList.contains()
element.classList.replace(old, new)
element.classList.remove()

element.style.[cssAttribute]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
node.addEventListener('click', func);

click
dblclick

mouseenter
mouseleave
mousemove

submit
focus
blur

keyup
keydown 
keypress

event.keyCode
event.key
event.code

event.target

Fullscreen API

1
2
3
4
5
6
7
8
9
10
11
if (document.fullscreenEnabled) {
	document.getElementById('fs_id').requestFullscreen();
} else {
	// not support Fullscreen API
}

document.getElementById('fs_id').exitFullscreen();

Also watch out for the useful handlers like,
onfullscreenchange: An event handler for the fullscreenchange event.
onfullscreenerror: An event handler for the fullscreenerror event.

Clipboard Async API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
if (navigator.clipboard 
     && navigator.clipboard.read 
     && navigator.clipboard.write) {
   setSupported(true);
} else {
   setSupported(false);
}

async function performCopy(event) {
   event.preventDefault();
   try {
      await navigator.clipboard.writeText(copyText);
      console.log(`${copyText} copied to clipboard`);
   } catch (err) {
      console.error('Failed to copy: ', err);
   }
}

async function performPaste(event) {
   event.preventDefault();
   try {
       const text = await navigator.clipboard.readText();
       setPastetext(text);
       console.log('Pasted content: ', text);
   } catch (err) {
      console.error('Failed to read clipboard contents: ', err);
   }
}

Resize Observer API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {
   try {
            let dumbBtn = document.getElementById('dumbBtnId');
            var resizeObserver = new ResizeObserver(entries => {
                for(const entry of entries) {
                    // Get the button element and color it
                    // based on the range values like this,
                   entry.target.style.color = 'green`;
                }
      });
      resizeObserver.observe(dumbBtn);
   } catch(e) {
            setSupported(false);
            console.log(e);      
   }
}, [rangeValue]);

Image Capture API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 显示视频设备所捕捉的内容
navigator.mediaDevices.getUserMedia({video: true})
  .then(mediaStream => {
     document.querySelector('video').srcObject = mediaStream;
     const track = mediaStream.getVideoTracks()[0];
			let zoom = document.querySelector('#zoom');
      const capabilities = track.getCapabilities();
      // Check whether zoom is supported or not.
      if(!capabilities.zoom) {
        return;
      }
      track.applyConstraints({ advanced : [{ zoom: zoom.value }] });
  }).catch(error => {
     console.error(` ${error} is not yet supported`);
});

const imageCapture = new ImageCapture(track);
    imageCapture.grabFrame()
      .then(imageBitmap => {
          const canvas = document.querySelector('#grabFrameCanvas');
          drawCanvas(canvas, imageBitmap);
    }).catch(error => {
          console.log(error);
          setError(error);
});

const imageCapture = new ImageCapture(track);
    imageCapture.takePhoto().then(blob => createImageBitmap(blob))
      .then(imageBitmap => {
          const canvas = document.querySelector('#takePhotoCanvas');
          drawCanvas(canvas, imageBitmap);
    }).catch(error => {
          console.log(error);
          setError(error);
});

const videoOff = () => {
   track.stop();
 }
 
Also watch out for the methods,

getPhotoCapabilities(): To get the ranges of available configuration options.
getPhotoSettings(): To get the current photo configuration settings.

Broadcast Channel API

The Broadcast Channel API allows communication between browsing contexts (windows, tabs, iframes) and workers on the same origin.

1
2
3
4
5
6
7
8
9
10
11
12
13
const CHANNEL_NAME = "channel";
const bc = new BroadcastChannel(CHANNEL_NAME);
const message = 'I am wonderful!';
 
const sendMessage = () => {
   bc.postMessage(message);
}

const CHANNEL_NAME = "channel";
const bc = new BroadcastChannel(CHANNEL_NAME);
bc.addEventListener('message', function(event) {
    console.log(`Received message, "${event.data}", on the channel, "${CHANNEL_NAME}"`);
});

Performance Interface API

The Performance interface provides access to the three major APIs

  • Navigation
  • Memory
  • Timing
1
2
3
4
console.log(performance.memory);

const [entry] = performance.getEntriesByType("navigation");
console.table(entry)

Battery Status API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
navigator.getBattery().then(function (battery) {

   // handle the charging change event
   battery.addEventListener("chargingchange", function () {
      console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
   });

   // handle charge level change
   battery.addEventListener("levelchange", function () {
      console.log("Battery level: " + battery.level * 100 + "%");
   });

   // handle charging time change
   battery.addEventListener("chargingtimechange", function () {
      console.log( "Battery charging time: " + battery.chargingTime + " seconds");
   });

   // handle discharging time change
   battery.addEventListener("dischargingtimechange", function () {
      console.log("Battery discharging time: " + battery.dischargingTime + " seconds");
   });

});

Network Information API

1
console.log(navigator.connection);

Vibration API

1
2
3
4
5
6
7
8
9
useEffect(() => {
   if (start) {
      // vibrate for 2 seconds
      navigator.vibrate(2000);
   } else {
      // stop vibration
      navigator.vibrate(0);
   }
}, [start]);

Bluetooth API

1
2
3
4
5
6
7
8
9
10
navigator.bluetooth.requestDevice({
   acceptAllDevices: true
}).then(device => {            
   setDeviceName(device.name);
   setDeviceId(device.id)
   setDeviceConnected(device.connected);
}).catch(err => {
   console.log(err);
   setError(true);
})

张英姿前端工程师

梦里寻他千百度 蓦然回首 那人却在灯火阑珊处