The difference between property and attribute

<div id="div1" class="class-div1">
	<P id="p1" data-name="p1-data-name">this is p1</P>
	<P id="p2">this is p2</P>
</div>

//property
var div1 = document.getElementById('div1')
console.log(div1.className)
div1.className = 'abc'
console.log(div1.className)
//attribute
var p1 = document.getElementById('p1')
console.log(p1.getAttribute('data-name'))
p1.setAttribute('data-name','xyz')

DOM Structural Operations (DOM Trees, themselves JS Objects)

New node

Get the parent element

Get child elements

Delete node

var div1 = document.getElementById('div1')
//Add new nodes
var p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
div1.appendChild(p1)//Add newly created elements
//Moving existing nodes
var p2 = document.getElementById('p2')
div1.appendChild(p2)

var div1 =  document.getElementById('div1')
var parent = div1.parentElement//Get the parent element

var child = div1.childNodes//Get child elements // collections 
//Normal line-breaking promises that there will be an empty text. Without line-breaking, there will be no empty text.
div1.removeChild(child[0])//Delete node
console.log(div1.childNodes[0].nodeType) //text 3
console.log(div1.childNodes[1].nodeType) //text 1
console.log(div1.childNodes[0].nodeName) //text #text
console.log(div1.childNodes[1].nodeName) //text p

Answer

What is the basic data structure of DOM

• Tree structure

What are the common API s for DOM operations

• Get DOM nodes, as well as properties and attributes of nodes
• Get parent node, get child node
• Add nodes, delete nodes

Attribute and property of DOM nodes are different

• property is just a modification and acquisition of the attributes of a JS object
• Attribute is the modification and acquisition of html tag attributes

Key summary

DOM essence

• XML , HTML

DOM Node Operation

DOM Structural Operation

BOM Operation (Browser Object Model)

subject

• How to detect the type of browser
• Disassemble the parts of the url

Knowledge points

• navigator Browser
• Screen screen width and height
• location address bar information
• history goes forward and backwards

//navigator
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

//screen
console.log(screen.width)
console.log(screen.height)

//location
console.log(location.href)//
console.log(location.protocol)//'http:' 'https:' 'ftp:'
console.log(location.host)//domain name
console.log(location.pathname)//Route
console.log(location.search)//Parameters? Later parameters
console.log(location.hash)

//history
history.back()//Browser Back
history.forward()//Browser Forward

How to detect the type of browser

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)

Disassemble the parts of the url

//location
console.log(location.href)//Browser Address
console.log(location.protocol)//'http:' 'https:' 'ftp:'
console.log(location.host)//domain name
console.log(location.pathname)//Route
console.log(location.search)//Parameters? Later parameters
console.log(location.hash)