JavaScript Dom编程
在什么地方编写js代码
先明确Dom的定义:Document Object Model(文本对象模型)
D:文档(html文档,xml文档)O:对象(document对象的属性和方法)M:模型
Dom是针对xml(html)的基于树的api。
helloworld.html
在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.当整个html文档完全加载成功后触发window.onload事件
//事件触发时,执行后面function里面的函数体
window.onload = function(){
//2.获取所有的button节点,并取得第一个元素
var btn = document.getElementsByTagName("button")[0];
//3.为button的onclick事件赋值:当点击button时,执行函数体
btn.onclick = function(){
//4.弹出helloworld
alert("helloworld");
}
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
然后又有如下的代码,比上面的简单很多,但是这代码有很大的耦合性
js-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- HTML和JS代码耦合起来 -->
<button onclick="alert('helloworld...')">ClickMe</button>
</body>
</html>
jsp-2解决了上述问题,在整个html文档被加载后,获取节点,但是script节点放在html文档的最后,不符合某些js代码的习惯。
jsp-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
<script type="text/javascript">
//1.获取button
var btns = document.getElementsByTagName("button");
alert(btns.length);
//2.为button添加onclick响应函数
btns[0].onclick = function(){
alert("helloworld!!");
}
</script>
代码自上而下执行,先alert1 再alert2,最后alert3,因为window.onload 事件在整个html文档被加载后触发执行,可以获取文档中的任何节点。
jsp-3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("1");
//window.onload 事件在整个html文档被加载后触发执行。
window.onload = function(){
alert("3");
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
<script type="text/javascript">
alert("2");
</script>
如何获取文档中的节点
如何获取元素节点
1.document.getElementById:根据id属性来获取对应的单个节点
2.document.getElementByTagName:根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度。
3.document.getElementByName:根据节点的name属性来获取符合条件的节点数组,但是ie的实现方式和W3C有差别,在html文档中若某节点(li)没有name属性,则ie使用getElementsByName 不能获取到节点数组,但是火狐和chrone可以
4.其他的两个方法,ie根本就不支持,所以不建议使用。
如何获取属性节点(某一元素节点的属性)
读写方式(推荐通过元素节点 . XXX的方式来获取属性值和设置属性值)
1.获取指定的元素节点
var nameNode = document.getElementById(“name”);
2.读取指定属性的值
alert(nameNode.value);
3.设置指定的属性的值
nameNode.value = “sssss”;
如何获取元素节点的子节点(只有元素节点才有子节点!!!)
1.先获取某个节点的所有子节点
var cityNode = document.getElementById(“city”);
2.利用元素节点的childNodes方法可以获取指定元素节点的所有子节点。
但是该方法不实用
alert(cityNode.childNodes.length)
3.获取#city节点的所有li子节点
var cityLiNodes = cityNode.getElementByTagName(“li”);
alert(cityNodes.length);
4.获取制定节点的第一个子节点和最后一个子节点。
alert(cityNode.firstChild);
alert(cityNode.lastChild);
获取文本节点
获取文本节点(文本节点一定是元素节点的子节点)
1.获取文本节点所在的元素节点
2.通过firstchild定位到文本节点
3.通过操作文本节点的nodeValue属性来读写文本节点的值。
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = “尚硅谷”;
1)nodeName:代表当前节点的名字,只读属性,**如果给定节点是一个文本节点
实验一:实现点击每个li节点,都弹出文本值
<script type="text/javascript">
window.onload = function(){ //点击每个li节点,都弹出文本值
//1.获取所有的li节点
//2.使用for循环进行遍历,得到没一个li节点
for(var i = 0;i < liNodes.length;i++){
//3.为每一个li节点添加onclick响应函数
liNodes[i].onclick = function(){
//4.响应函数中获取当前节点的文本节点的文本的文本值
//5.alert打印
//this为正在响应事件的那个节点
alert(this.firstChild.nodeValue);
//这里的this可以改成liNodes[i]吗,不行,??????
}
}
}
</script>
?????处的疑问
在你点击的时候,上面那个for循环已经结束了,i此时是8,不会变了,liNodes[8]不指向任何节点。
实验二:实现点击每个li节点,若每个li节点的文本值没有^^开头,加上,有的话就去除
<script type="text/javascript">
window.onload = function(){
var str ="^^abc";
var reg = /^\^{2}/g; //正则表达式,g表示尽可能多的匹配
alert(reg.test(str));
str = str.replace(reg,"");
var str2 = "abc";
alert(reg.test(str2));
}
1.先使用正则表达式判断是否是^^ 开始
2.调用js中的方法—字符串的replace(reg,str)方法除去指定的字符串。
法二
<script type="text/javascript">
window.onload = function(){
var liNodes = document.getElementsByTagName("li");
for(var i = 0;i<liNodes.length;i++){
liNodes[i].onclick = function(){
var val = this.firstChild.nodeValue;
var reg = /^\^{2}/g;
if(reg.test(val)){
val = val.replace(reg,"");
}else{
val = "^^" + val;
}
this.firstChild.nodeValue = val;
}
}
}
节点的属性
关于节店点的属性:nodeType,nodeName,nodeValue
在文档中,任何一个节点都有这三个属性
而id,name,value是具体节点的属性
1.元素节点的三个属性
var bjNode = document.getElemtypeById(“bj”);
alert(bjNode.nodeType);//元素节点:1
alert(bjNode.nodeName);//节点名:li
alert(bjNode.nodeValue);元素节点没有nodeValue 属性值:null
2.属性节点
var nameAttr = document.getElementById(“name”).getAttributeNode(“name”);
alert(bjNode.nodeType);//属性节点:2
alert(bjNode.nodeName);//属性节点的节点名:属性名
alert(bjNode.nodeValue);属性节点的nodeValue 属性值:属性值
3.文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本节点:0
alert(textNode.nodeName);//节点名:#text
alert(textNode.nodeValue);文本节点的nodeValue 属性值:文本值本身
注意:nodeType,nodeName是只读的,而nodeValue是可以被改变的,以上三个属性,只有在文本节点中使用nodeValue读写文本值时使用最多。