节点及其类型
元素节点
属性节点:元素的属性,可以直接通过属性的方法来操作。
文本节点:元素节点的子节点,其内容为文本。
HTML 文档编写 js 代码的位置
一般,在 body 节点之前编写 js 代码,利用 window.onload 事件,在当前文档完全加载之后被触发,可以获取到当前文档的任何节点。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>JavaScript HTML DOM 测试</title>
<script type="text/javascript">
......
</script>
</head>
<body>
......
</body>
</html>
获取元素节点
document.getElementById():根据 id 属性获取对应的单个节点,如果找到相应的元素则返回该元素的 Element 对象,如果不存在,则返回 null 。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//返回 id 为 city 的节点
var cityNode = document.getElementById("city");
alert(cityNode);
//返回 id 为 sz 的节点
var szNode = document.getElementById("sz");
alert(szNode);
}
</script>
</head>
<body>
<p>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="sz">深圳</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>武汉</li>
</ul>
</p>
</body>
</html>
document.getElementsByTagName():根据标签名返回一个指定节点名的对象数组 HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。
数组对象 length 属性可以获取数组的长度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//使用标签名 li 获取指定节点的集合
var liNodes = document.getElementsByTagName("li");
alert(liNodes);
alert(liNodes.length);
//document 对象方法获取 city 的 Node 节点
var cityNode = document.getElementById("city");
//Node 接口方法获取 li 节点集合
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes);
alert(cityLiNodes.length);
}
</script>
</head>
<body>
<p>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="sz">深圳</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>武汉</li>
</ul>
</p>
</body>
</html>
document.getElementsByName():根据节点的 name 属性获取相同名称(name)的元素,返回一个对象数组 object NodeList。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//根据 HTML 文档元素的 name 属性名来获取指定的节点的集合
var genderNodes = document.getElementsByName("gender");
alert(genderNodes);
alert(genderNodes.length);
}
</script>
</head>
<body>
<p>
性别:
<input type="radio" name="gender" value="male">男</input>
<input type="radio" name="gender" value="female" checked="checked">女</input>
</p>
</body>
</html>
获取属性节点
可以直接通过 node.id 这样的方式来获取和设置属性节点的值。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//获取 name 的元素节点
var nameNode = document.getElementById("name");
//读取元素节点的属性值
alert(nameNode.value);
//设置元素节点的属性值
nameNode.value = "Kevin";
}
</script>
</head>
<body>
<p>
姓名:<input type="text" id="name" name="username" value="UserName"></input>
</p>
</body>
</html>
获取元素节点的子节点
通过调用元素节点的 getElementsByTagName() 方法来获取。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//获取元素节点
var cityNode = document.getElementById("city");
//获取元素节点子节点的集合
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes);
alert(cityLiNodes.length);
//元素节点第一个子节点
alert(cityNode.firstChild);
//元素节点最后一个子节点
alert(cityNode.lastChild);
}
</script>
</head>
<body>
<p>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="sz">深圳</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>武汉</li>
</ul>
</p>
</body>
</html>
获取文本节点
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//获取文本节点所在的元素节点
var szNode = document.getElementById("sz");
//通过 firstChild 定义到文本节点
var szNodeText = szNode.firstChild;
//读取文本节点的值
alert(szNodeText.nodeValue);
//设置文本节点的值
szNodeText.nodeValue = "广东省深圳市经济特区";
}
</script>
</head>
<body>
<p>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="sz">深圳</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>武汉</li>
</ul>
</p>
</body>
</html>
节点的属性
- 文档中任何一个节点都有 nodeName , nodeType , nodeValue 属性,id , name , value 是具体节点的属性。
- nodeName:代表当前节点的名字,只读属性。如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串。
- nodeType:返回一个整数, 这个数值代表着给定节点的类型,只读属性。
- 1:元素节点
- 2:属性节点
- 3:文本节点
- nodeValue:返回给定节点的当前值(字符串),可读写的属性。
- 元素节点:返回值是 null。
- 属性节点:返回值是这个属性的值。
- 文本节点:返回值是这个文本节点的内容。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
//元素节点
var szNode = document.getElementById("sz");
alert(szNode.nodeName); //元素节点名: li
alert(szNode.nodeType); //元素节点类型: 1
alert(szNode.nodeValue); //元素节点没有 nodeValue 属性值: null
//属性节点
var nameAttr = document.getElementById("name").getAttributeNode("name");
alert(nameAttr.nodeName); //属性节点的节点名:name
alert(nameAttr.nodeType); //属性节点类型: 2
alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值:username
//文本节点
var nodeText = szNode.firstChild;
alert(nodeText.nodeName); //文本节点名: #text
alert(nodeText.nodeType); //文本节点类型:3
alert(nodeText.nodeValue); //文本节点的 nodeValue 属性值: 深圳
}
</script>
</head>
<body>
<p>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="sz">深圳</li>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>武汉</li>
</ul>
</p>
<p>
姓名:<input type="text" id="name" name="username" value="UserName"></input>
</p>
</body>
</html>
创建元素节点
createElement():按照给定的标签名创建一个新的元素节点。方法只有一个参数:被创建的元素节点的名字,是一个字符串。方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里,它只是一个存在 JavaScript 上下文的对象。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>HTML DOM 测试</title>
<script type="text/javascript">
window.onload = function(){
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
//新创建一个元素节点, 返回值为指向元素节点的引用。
var liNode = document.createElement("li");
//创建文本节点,参数为文本值, 返回该文本节点的引用。
var whText = document.createTextNode("武汉");
liNode.appendChild(whText);
//新添加 newChild 子节点, 该子节点将作为 elementNode 的最后一个子节点。
var cityNode = document.getElementById("city");
cityNode.appendChild(liNode);
}
</script>
</head>
<body>
<p>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="sz">深圳</li>
<li>上海</li>
<li>北京</li>
</ul>
</p>
</body>
</html>
创建文本节点
createTextNode():创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。它是一个文本节点,所以它的 nodeType 属性等于 3。
方法只有一个参数:新建文本节点所包含的文本字符串。新元素节点不会自动添加到文档里。
为元素节点添加子节点
appendChild():
节点替换
replaceChild():
插入节点
- insertBefore():
- insertAfter():
删除节点
removeChild():