1.dom树

.png

dom树.png

浏览器在解析我们的网页结构的时候，会产生一个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>标签里面的内容

4.document.querySelectorAll

document.querySelectorAll 返回来是一个 数组

<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)  //会发现这是一个数组
console.log(el.length)

var arraylength=el.length
//使用数组遍历，改变值
for(var i=0;i<arraylength;i++){
  el[i].textContent='heihei'
}
  </script>