JS foundation 8

DOM Document object model

Definition

Provide operation HTML Document object capability , Provide API

operation

1. Get tag elements
2. Operation content
3. Operation style
4. Operation properties

DOM object

• document.title
• document.write（）

<title>Document</title>
<script>
    var box=document.title
    console.log(box)
// result Document
    document.write('hello word')
// result hello word
</script>

Get tag elements

attribute	meaning
document.getElementById(’’)	adopt ID obtain
document.getElementsByClassName(’’)	adopt CLASS obtain
document.getElementsByTagName(’’)	Get... Through tags
getElementsByName(’’)	adopt NAME obtain
document.querySelector(’’)	image CSS Sample acquisition
document.querySelectorAll(’’)	image CSS Sample acquisition

notes ：

1. getElementsByName(’’) Used to get form elements name
2. Only document.getElementById(’’) and document.querySelector(’’) To get a single value , Others are pseudo arrays

	<div id="box">box1</div>
    <div class="box">box2</div>
    <p>p1</p>
    <input type="text" name="text">
<script>
    var box1=document.getElementById('box')
    var box4=document.querySelector('#box')
    var box5=document.querySelector('.box')
    var box6=document.querySelectorAll('div')
    var box2=document.getElementsByClassName('box')
    var box3=document.getElementsByTagName('div')
    var input=document.getElementsByName('text')
    console.log(box1)
// result <div id="box">box1</div>
    console.log(box2)
// result [div.box]
    console.log(box3)
// result [div#box, div.box, box: div#box]
    console.log(input)
// result [input]
    console.log(box4)
// result <div id="box">box1</div>
    console.log(box5)
// result <div class="box">box2</div>
    console.log(box6)
// result [div#box, div.box]
 </script>

Operation content

1. innerHTML Get text content , Including the tag elements inside
2. innerText Get text content , Do not include the tag elements inside , You can only get plain text
3. value Get text content , You can only get text （input） What's in it

<div>
        <div> Test text </div>
    </div>
    
    <script>
        var divEle=document.querySelector('div')
        var content1=divEle.innerHTML
        var content2=divEle.innerText
        console.log(content1);
// result  <div> Test text </div>
        console.log(content2);
// Result test text 
    </script>

Set contents

• Ele.innerHTML=‘ Content ’
• Ele.innerText=‘ Content ’

Operation style

attribute	meaning
Ele.style.color=‘red’	Add inline style
Ele.className=‘ Class name ’	Add class name
Ele.classList.add(‘ Class name ’)	Add class name
Ele.classList.remove(‘ Class name ’)	Remove class name

 <div></div>
    <script>
        var divEle=document.querySelector('div')
        divEle.style.backgroundColor='red'
        console.log(divEle);
// result <div style="background-color: red;"></div>
        divEle.className='box'
        console.log(divEle);
// result <div class="box" style="background-color: red;"></div>
         divEle.classList.add('box2')
         console.log(divEle)
// result <div class="box box2" style="background-color: red;"></div>
        divEle.classList.remove('box2')
        console.log(divEle);
// result <div class="box" style="background-color: red;"></div>
    </script>

Operation properties

1. Set properties
   setAttribute(‘ Property name ’,‘ Property value ’)
2. get attribute
   getAttribute(‘ Property name ’)
3. Remove properties
   removeAttribute(‘ Property name ’)

<div></div>
    <script>
       var divEle=document.querySelector('div')
       divEle.setAttribute('class','box')
	   console.log(divEle);
// result <div class="box"></div>
       var ToObtain=divEle.getAttribute('class')
// result box       
       var ToObtain=divEle.removeAttribute('class')
        console.log(ToObtain);
 // result <div></div>       
    </script>

Find node

DOM Node object

1. Whole HTML A document is treated as a document object document
2. Whole HTML Label elements are treated as DOM Node object
3. Every HTML The content attribute of the tag element is also regarded as DOM Node object
   notes ： There are blank text nodes between element nodes

Dynamic operation node

1. Create nodes

• Create element node
  var elment=document.createElenment('div')
• Create text node
  var textNode=document.createTextNode(' Elements ')

2. Add a node

• Add child nodes to the element
  Parent node .oppendchild(' Child node ')
• Insert the child node specified in the parent element
  Parent node .insertBefore(' New child nodes ', Old child nodes )

3. Delete node
   Delete the child node under the parent node
   Parent node .removeChild(' Child node ')
Child node .remove()
4. Replacement node
   The new node replaces the child node under the parent node
   Parent node .replaceChild(' New node ',' Old node ')

<div></div>
    <script>
        var elmentNode=document.createElement('div')
// Create element node         
        var textNode=document.createTextNode(' Test creation element ')
// Create text elements 
        elmentNode.appendChild(textNode)
// The text element is added to the node      
        var node=document.querySelector('div')
		node.appendChild(elmentNode)
// result <div>
		<div> Test creation element </div>
	  </div>
        elmentNode.remove()
// result <div></div>
     </script>

Clone node

node .clone()

node node

All node types must inherit node type , Become node A subclass or descendant of

attribute	nodeType	nodeName	nodeValue
Elements	1	Upper case label name	null
Text	3	#text	Content
attribute	2	Property name	Property value

Get non line style

window.getComputedStyle( Node object ). Style name

<style> div{ 
    
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    
    <script>
        var divEle=document.querySelector('div')
        var accept=window.getComputedStyle(divEle).width
        console.log(accept)
// result 100px
    </script>

Offset

• offsetTop
  Distance above the parent element
• offsetLeft
  Distance above the parent element
  notes ： No positioning and window , There is a parent element positioned

Get the element width

attribute	meaning
window.getComputedstyle( Node object ). Style name	Content
clientWidth	Wide content +padding
offsetWidth	Wide content +padding+border

<style> div{ 
    
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid #000;
        }
    </style>
</head>
<body>
    <div></div>
    
    <script>
        var divEle=document.querySelector('div')
        var content=window.getComputedStyle(divEle).width
        console.log(content)
// result 100px
        var contentPadding=divEle.clientWidth
        console.log(contentPadding);
// result 120
        var contentBorder=divEle.offsetWidth
        console.log(contentBorder);
// result 140
    </script>