JavaScript Dom其他查询方法 及 js增删改查

Dom其他查询方法

1. 获取body标签document.getElementsByTagName("body")[0]或document.body
2. 获取页面中所有的元素document.all或 document.getElementsByTagName("*")
3. 根据元素的class属性查询一组元素的节点document.getElementsByClassName("box1")ie8及以下浏览器不支持
4. 根据CSS选择器来查询元素的节点document.querySelector(".box1 div").innerHTML如果满足的条件有多个，他只会返回第一个
5. 获取页面中class为box1的所有元素document.querySelectorAll(".box1")返回数组

---

js增删改查简单举例

html代码：

<button id="tianjia">添加广州（在最后）</button>
<button id="tianjiaBefore">添加广州到北京之前</button>
<button id="replacebj">用广州替换北京</button>
<button id="removebj">删除北京</button>
<button id="tianjia_easy">简单快速广州在最后</button>
<ul id="city">
    <li id="bj">北京</li>
    <li>上海</li>
</ul>

效果如下：

在操作之前，写一个点击方法，方面后面使用

function myclick(btnstr, fun){
    var btn = document.getElementById(btnstr);
    btn.onclick = fun;
}      

所有的按钮点击，都在window.onload = function(){}中执行

1. 添加“广州”，在最后

myclick("tianjia",function(){
    //创建元素节点，需要一个标签名作为参数
    //根据标签名创建元素节点对象，并将创建好的对象作为返回值返回
    var li = document.createElement("li")
    //创建文本节点，需要一个文本内容作为参数，根据内容创建文本节点，并将新的文本节点返回
    var guangzhouText = document.createTextNode("广州")
    //将guangzhou设置为li的子节点
    //appendChild向一个父节点添加一个新的子节点 
    //语法：父节点.appendChild(子节点)
    li.appendChild(guangzhouText);
    //获取id为city的节点
    var city = document.getElementById("city");
    //将liu作为子节点添加到city的父节点中
    city.appendChild(li);
});

效果如下：

2. 简单快速添加广州

myclick("tianjia_easy",function(){
     //全部替换了，低性能
     var city = document.getElementById("city");
     // city.innerHTML += "<li>广州</li>"

     //高效折中添加
     //创建li
     var li = document.createElement("li");
     //向li中设置文本
     li.innerHTML = "广州";
     city.appendChild(li);
 }); 

3. 将“广州”添加到“北京“之前

myclick("tianjiaBefore", function(){
    //创建一个广州
    var li = document.createElement("li")
    var tianjiaBeforeText = document.createTextNode("广州")
    li.appendChild(tianjiaBeforeText);

    //获取id为bj的节点
    var bj = document.getElementById("bj");
    //获取city
    var city = document.getElementById("city");

    //可以在指定的子节点前插入新的子节点
    //语法：父节点.insertBefore(新节点， 旧节点);
    city.insertBefore(li, bj);
});

效果如下：

4. 使用“广州”替换“北京”节点

myclick("replacebj",function(){
    //创建一个广州
    var li = document.createElement("li")
    var tianjiaBeforeText = document.createTextNode("广州")
    li.appendChild(tianjiaBeforeText);

    //获取id为bj的节点
    var bj = document.getElementById("bj");
    //获取city
    var city = document.getElementById("city");
    
    //可以使用指定的子节点替换已有的子节点
    //语法：父节点.replaceChild(新节点， 旧节点)
    city.replaceChild(li, bj);                
 });  

效果如下：

5. 删除北京

myclick("removebj", function(){
     //获取id为bj的节点
     var bj = document.getElementById("bj");
     //获取city
     var city = document.getElementById("city");  

     //删除一个子节点 
     //语法：父节点.removeChild(子节点)
     //或者直接获取子节点的父节点然后删除 子节点.parentNode.removeChild(bj)
     city.removeChild(bj); 
     bj.parentNode.removeChild(bj);                            
 });

效果如下：