节点的概念
DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
比如一个超链,作为一个DOM对象,就可以使其隐藏,修改其href指向的地址。之前的博客里面也用到了一点点。
获取节点
document.getElementById | 通过id获取元素节点 |
getElementsByTagName | 通过标签名称获取元素节点 |
getElementsByClassName | 通过类名获取元素节点 |
getElementsByName | 通过表单元素的name获取元素节点 |
null | 为什么会获取不到? |
attributes | 获取属性节点 |
childNodes | 获取内容节点 |
上面的四种获取方式中,除了getelmentbyid之外,其他三个的返回值都是一个节点数组,因为只有id是唯一的!!,所以能通过id准确无误的找到需要寻找的节点。
为什么会获取不到节点!出现NULL的情况,比如如下代码:
<html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>
感觉逻辑上是没问题的,但是输出的是null。
这是因为javascript是解释语言,是顺序执行的,和java的函数不一样。 在执行到 document.getElementById的时候,div标签还没有加载,所以无法获取。所以要把html内容写到script的上面去才行。
获取属性节点的时候,首先通过getElementById获取元素节点,然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个,所以是以数组的形式返回出来的,可以用数组下标的形式去定位某一个指定属性,比如id、name。如果是要指定某一个属性,那可以as["id"]取出名称是id的属性,就比自己去数下标要方便。
获取内容节点的时候,首先通过getElementById获取元素节点,然后通过childNodes获取其所有的子节点。 其中第一个子节点,下标为0,就是其内容节点。然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
节点的属性
nodeName | 节点名称 |
nodeValue | 节点值 |
nodeType | 节点类型 |
innerHTML | 元素的文本内容 |
id value className |
元素上的属性 |
nodeName:表示一个节点的名字
document.nodeName 文档的节点名,是 固定的#document
div1.nodeName 元素的节点名,是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名,是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名,是固定的 #text
nodeValue:表示一个节点的值
document是没有nodeValue的:null
元素节点是没有nodeValue的:null
属性节点id的nodeValue:d1
内容节点的nodeValue:hello HTML DOM
nodeType表示一个节点的类型
修改与获取内容的值
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的。
获取属性的时候
getAttribute("test")
attributes["test"].nodeValue
attributes[0].nodeValue
都行的。
作业:
1、
<!DOCTYPE html>
<html>
<head>
<title></title>
<input type="text" class="xx" id="t1">
<input type="button" class="xx" id="b1" value="验证" οnclick="get()">
<font id="ans" class="xx"> </font>
<script type="text/javascript">
function get() {
// body...
var text1 = document.getElementById('t1').value;
if(text1[0] == 'a' || text1[0] =='A')
{
document.getElementById("ans").childNodes[0].nodeValue="账号已经存在";
document.getElementById("ans").color="red";
//document.write(document.getElementById("ans").attributes[2].nodeValue);
}
else
{
document.getElementById("ans").childNodes[0].nodeValue="账号可以使用";
document.getElementById("ans").color="green";
}
console.log("End");
}
</script>
<style type="text/css">
.xx{
float: left;
}
</style>
</head>
</html>
2.
<input type="button" οnclick="change1()" value="通过src属性直接切换图片"><br>
<input type="button" οnclick="change2()" value="通过属性节点切换图片"><br>
<img src="C:\Users\msi-\Desktop\imgs\23.jpg" id="img1">
<script type="text/javascript">
var imgg=document.getElementById('img1');
function change1() {
// body...
imgg.src="C:/Users/msi-/Desktop/imgs/25.jpg";
}
function change2() {
// body...
imgg.attributes[0].nodeValue="C:/Users/msi-/Desktop/imgs/27.jpg";
}
</script>