Dom其他查询方法
- 获取body标签
document.getElementsByTagName("body")[0]
或document.body
- 获取页面中所有的元素
document.all
或document.getElementsByTagName("*")
- 根据元素的class属性查询一组元素的节点
document.getElementsByClassName("box1")
ie8及以下浏览器不支持 - 根据CSS选择器来查询元素的节点
document.querySelector(".box1 div").innerHTML
如果满足的条件有多个,他只会返回第一个 - 获取页面中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(){}
中执行
- 添加“广州”,在最后
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);
});
效果如下:
- 简单快速添加广州
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);
});
- 将“广州”添加到“北京“之前
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);
});
效果如下:
- 使用“广州”替换“北京”节点
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);
});
效果如下:
- 删除北京
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);
});
效果如下: