JS之DOM操作笔记

 

DOM的概述

document object modelhtml文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。

我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改，即通过js动态的修改内存中的那一份html及css的代码。

JS的DOM操作（重点！）

一、标签元素的操作

• 1.获取元素对象

  • 根据id获取元素 getElementByid("id值")

  • 根据标签获取多个元素

  • 根据类名获取多个元素

  • 根据name属性获取多个元素

• 2.创建一个新元素：createElement()

• 3.对子节点进行操作

  • hasChildNodes():判断是否有子节点

  • removeChild(子节点):删除子节点

  • replaceChild(新节点,旧节点):替换子节点

• 4.标签体的获取与设置

  • innerHTML

  • innerText

二、属性设置

• 1.获取属性的值：getAttribute(name)

• 2.设置属性的值：setAttribute(name,value)

• 3.删除某个属性：removeAttribute(name)

案例一:隔行换色的案例

  
  <script type="text/javascript">
              //1.当页面加载完毕的时候获取所有的tr
              window.onload = function(){
  
                  var trs = document.getElementsByTagName("tr")
                  //遍历每一个tr
                  //前面两行不设置颜色
                  for(i=2;i<trs.length;i++){
  
                      if(i % 2 == 0){
  
                          //奇数行
                          //设置该行的背景色为红色
                          trs[i].style.backgroundColor = "red"
                      }else{
  
                          //偶数行
                          //设置该行的背景色为绿色
                          trs[i].style.backgroundColor = "green"
                      }
                  }
                  
                  //当鼠标移动到某一行，给该行的颜色设置成灰色。当鼠标移开的时候，又恢复成原来的颜色
                  //遍历出每一行
                  var color = "white"
                  for (i=0;i<trs.length;i++) {
  
                      trs[i].onmouseover = function(){
  
                          //绑定鼠标移入事件