1.dom樹

.png

dom樹.png

瀏覽器在解析我們的網(wǎng)頁結(jié)構(gòu)的時候，會產(chǎn)生一個document
可以通過JavaScript操控這些元素

2.

document.getElementById('h1title').textContent=12345

var el =document.getElementById('h1title')
el.textContent=12345

通常我們會采取第二種，將el賦值，因為這樣可以更好的瀏覽代碼

3. document.querySelector

querySelector 不僅可以選擇id,還可以選擇class元素，就想css選擇器一樣

var el =document.querySelector('#h1title')
el.textContent='78979'

  <h1 id="h1title">
      <em>@@</em>
  </h1>
 

 <script>
var el =document.querySelector('#h1title em')
el.textContent='123'
</script>

下面這行代碼就是修改<h1>下面的<em>標(biāo)簽里面的內(nèi)容

4.document.querySelectorAll

document.querySelectorAll 返回來是一個 數(shù)組

<h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>
  <h2 class="h2title">hei</h2>

  <script>
var el =document.querySelectorAll('.h2title')
console.log(el)  //會發(fā)現(xiàn)這是一個數(shù)組
console.log(el.length)

var arraylength=el.length
//使用數(shù)組遍歷，改變值
for(var i=0;i<arraylength;i++){
  el[i].textContent='heihei'
}
  </script>