目录
Document Object Model 文档 对象 模型
Document Object Model 文档 对象 模型
Dom通过Js操作网页的
节点Node:网页中的每一个部分都是一个节点。
常用的节点:
- 文档节点
- 元素节点:标签
- 属性节点:元素的属性
- 文本节点:标签中的文本内容。
<body>
<button id = "btn">按钮</button>
<!--文档标签 文档节点代表整个网页-->
<script type="text/javascript">
//console.log(document);/*HTMLDocument*/
//获取button对象
var btn = document.getElementById("btn");
console.log(btn);
//修改按钮里面文字
btn.innerHTML = "改过的btn";
console.log();
</script>
</body>
文档的加载
浏览器在加载一个页面的时,按照自上而下顺序加载的。
onload,一张页面或者一个图像完成加载之后才触发。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//为windows绑定一个onload事件。在页面加载完成之后执行,确保Demo执行的时候,所有的Dom对象已经加载完毕了。
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("Hello!");};
};
</script>
</head>
<body>
<button id= "btn">按钮</button>
</body>
</html>
DOM查询
innnerHTML 通过这个属性可以获取到元素内部的HTMlDemo,
对于自结束标签,没有内部,innerHTMl无意义。
- 根据id
- 根据标签名
- 根据名字
<script type="text/javascript">
window.onload = function(){
//为1按钮绑定一个单级响应函数
//ID
var btn1 = document.getElementById("1");
btn1.onclick = function(){
//查找节点
var bj = document.getElementById("bj");
console.log(bj.innerHTML);//获取元素内部的Html属性
};
//为2按钮绑定一个双击级响应函数-
//标签名--返回一个类数组对象
var btn2 = document.getElementById("2");
btn2.ondblclick = function(){
var lis = document.getElementsByTagName("p");
for(var i = 0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
};
为3按钮绑定一个双击级响应函数-
var btn3 = document.getElementById("3");
btn3.ondblclick = function(){
var gender = document.getElementsByName("gender");
for(var i = 0;i<gender.length;i++){
console.log(gender[i].value);//读取class时候要用className
};
};
};
</script>
获取元素节点的子节点(通过元素节点调用的)
getElementsByTagName()---》返回当前节点的指定标签名后代节点。
childNodes ---》表示当前节点的所有子节点-----》会获取包括文本节点(标签间的空白也会作为子节点)在在内的所有子节点
firstChild----》表示当前节点的第一个节点
lastChild----》表示当前节点的最后一个节点
var btn4 = document.getElementById("4");
btn4.onclick = function(){
//查找city所有的子节点
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
};
var btn5 = document.getElementById("5");
btn5.onclick = function(){
var city = document.getElementById("city");
//返回city的所有子节点
var cns = city.childNodes;
/*alert(cns.length);*/
var cns2 = city.children;
//children可以获取当前所有元素的子元素
alert(cns[0].innerHTML);
};
var btn6 = document.getElementById("6");
btn6.onclick = function(){
//获取id为phone元素
var phone = document.getElementById("phone");
var fir = phone.firstChild;//获取当前元素的第一个子节点(包括空白
//获取当前元素的第一个子元素(不兼容ie8)
fir = phone.firstElementChild;
};
};
获取父节点和兄弟节点
myclick("7",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
var pn = bj.parentNode;//获取#bj的父节点
alert(pn.innerText);//只有文本,没有标签
});
myclick("8",function(){
//返回前一个兄弟节点
var and = document.getElementById("android");
/*console.log(and);*/
var ps = and.previousSibling;
var pe = and.previousElementSibling;//获取前一个兄弟元素,不包括空白文本
console.log(pe.innerHTML);
});
myclick("9",function(){
//获取id为username的value值---改值
var user = document.getElementById("username");
var value = user.value;
var value = "jint";
console.log(value);
});
myclick("10",function(){
//获取id为bj的文本值
});
DOM其他方法
<script type="text/javascript">
window.onload = function(){
//获取body属性
/*var body = document.getElementsByTagName("body")[0];
console.log(body);*/
//直接用这个方法
var body = document.body;
var de = document.documentElement;//HTML根标签
var all = document.all;//页面中所有的元素
all = document.getElementsByTagName("*");//页面中所有的元素
//根据元素的class属性值查询
//ie9以及以上的额浏览器支持
var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
var divs = document.getElementsByTagName("div");
console.log();
//需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素
var div = document.querySelector(".box1 div");//可以在ie8中使用
console.log(div.innerHTML);
//该方法只返回一个,如果满足条件的元素有多个,
//返回符合条件的额所有的元素--返回数组
var div = document.querySelectorAll(".box1");
}