您的位置：首页 > Web前端 > JavaScript

javascript基础知识梳理-DOM

2014-05-08 18:51 573 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
<script type="text/javascript">
window.onload = function() {
//查询文档的一个或多个元素有如下方法,用指定的id属性,name属性,标签名称,css类,css选择器
//使用id属性的时候如果文档中出现了两个id属性相同的元素,那么只会选取第一个元素
var btn = document.getElementsByName("b1");
console.log(btn);
//使用name属性查找元素可以返回多个属性名称相同的元素,结果返回NodeList对象
var btns = document.getElementsByName("b1");
console.log(btns);
//通过标签名选取元素,getElementsByTagName,如果使用通配符*,将取到文档中所有的元素
var inputList = document.getElementsByTagName("input");
console.log(inputList.length);
//每个Element元素也有getElementsByTagName方法,只是范围缩小到该Element元素的所有后代元素
var div1 = document.getElementById("div1");
var div1_style = div1.style;
var btns_div1 = div1.getElementsByTagName("input");
console.log(btns_div1);
console.log("div1.innerHTML:" + div1.innerHTML);
console.log("div1.nodeName:" + div1.nodeName);
console.log("div1.nodeValue:" + div1.nodeValue);
console.log("div1.nodeType:" + div1.nodeType);
var b3 = document.getElementById("b3");
var b4 = document.createElement("input");
b4.value = "button4";
b4.id = "b4";
b4.type = "button";
//div1.appendChild(b4);//追加元素到父节点末尾
//div1.insertBefore(b4, b3);//将元素插入到父节点的某个子节点前面
//div1.removeChild(b3);//删除某个子节点
div1.replaceChild(b4, b3);//使用新元素替换旧元素,等同于先调用insertBefore将新元素插入到旧元素之前,再调用removeChild删除旧元素
}
</script>
</head>
<body>
<input type="button" name="b1" value="button1" />
<input type="button" name="b1" value="button2" />
<div id="div1">
<input type="button" id="b3" value="button3" />
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航