Javascript进阶笔记 - DOM的增删改查

DOM的增删改查

目录

• DOM的增删改查
  • 1. DOM查询
    • 1.1 常规DOM查询方法
    • 1.2 通过CSS选择器查找HTML元素
    • 1.3 通过 HTML 对象选择器查找 HTML 对象
  • 2. DOM元素的增添
  • 3. DOM元素的修改
  • 4. DOM元素的删除

1. DOM查询

1.1 常规DOM查询方法

• document.getElementById()

  通过标签的id属性查找标签dom对象

  var myElement = document.getElementById("intro");
  

• document.getElementsByName()

  根据指定的name属性查询返回多个标签对象集合。这个集合和数组一样，集合中每个元素都是dom对象，集合中元素的顺序是他们在html页面中从上到下的顺序

  var y = document.getElementsByName("test");
  

• document.getElementsByTagName()

  根据指定标签名来进行查询并返回集合

  var x = document.getElementsByTagName("p");
  

• document.getElementsByClassName()

  根据指定类名来进行查询并返回集合

  var x = document.getElementsByClassName("intro");
  

• document对象的四个查询方法，如果有id属性，优先使用getElementById方法来进行查询。如果没有id属性，则优先使用getElementsByName方法来进行查询。如果id属性和name属性都没有最后再按标签名查getElementsByTagName或按类名document.getElementsByClassName。

• 以上四个方法，一定要在页面加载完成后执行，才能查询到标签对象

1.2 通过CSS选择器查找HTML元素

• 如果需要查找匹配指定 CSS 选择器（如id、类名、类型、属性、属性值等等）的所有 HTML 元素，可以使用 querySelectorAll() 方法

  var x = document.querySelectorAll("p.intro");
  

1.3 通过 HTML 对象选择器查找 HTML 对象

• document.body：该属性保存了body的引用

• document.documentElement：保存的是html根标签

• document.forms：保存了表单标签

  //查找id="frm1"的form元素然后显示所有元素值
  var x = document.forms["frm1"];
  var text = "";
   var i;
  for (i = 0; i < x.length; i++) {
      text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
  

2. DOM元素的增添

• document.createElement()

  document.createElement()通过给定的标签名，创建一个标签对象

• document.createTextNode()

  document.createTextNode通过给定的节点名，创建一个文本节点对象

• appendChild()

  向父节点中添加一个新的节点

  语法：[父节点].appendChild([子节点])

  //目标：添加一个<li>广州</li>到city节点后
  
  //创建li元素节点
  var li = document.createElement("li");
  //创建文本节点
  var gzText = document.createTextNode("广州");
  //将gzText设置为li的子节点
  li.appendChild(gzText);
  
  //获取id为city的节点
  var city = document.getElementById("city");
  //将广州添加到city下
  city.appendChild(li);
  

  使用innerHTML和字符串拼接也可以完成以上操作，但由于此方法常常更新整个字段导致效率降低，所以要结合常规方法一起使用

  var li = document.createElement("li");
  li.innerHTML = "广州";
  city.appendChild(li);
  

3. DOM元素的修改

• insertBefore()

  可以在指定的子节点前插入新的子节点

  语法：[父节点].insertBefore([新节点,旧节点])

• replaceChild()

  可以使用指定的子节点替换已有的子节点

  语法：[父节点].replaceChild([新节点],[旧节点])

  //目标：将"广州"节点插入到#bj前面
  
  //创建广州
  var li = document.createElement("li");
  var gzText = document.createTextNode("广州");
  li.appendChild(gzText);
  
  //获取id为bj的节点
  var bj = document.getElementById("bj");
  
  //获取city
  var city = document.getElementById("city");
  
  city.insertBefore(li,bj);
  

4. DOM元素的删除

• removeChild()

  可以删除一个子节点

  语法：[父节点].removeChild(子节点)

  //目标：移除bj节点
  var bj = document.getElementById("bj");
  
  //调用bj的父节点，由父节点调用删除方法，这样就不需要单独获取父元素了
  bj.parentNode.removeChild(bj);