HTML DOM
2016-04-22 14:09
519 查看
节点及其类型
元素节点属性节点：元素的属性，可以直接通过属性的方法来操作。
文本节点：元素节点的子节点，其内容为文本。
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
b9b3
("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()：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript DOM有用函数
- JavaScript CSS-DOM
- python 库 HTML DOM
- HTML DOM 和 XML DOM 不同
- HTML事件属性
- DOM、HTML DOM、XML DOM关系的深度解析
- 区别：DOM Core 与 HTML-DOM
- 弹幕案例
- DOM文档对象模型
- js中给多个class属性的标签赋值
- HTML DOM
- 句法结构可视化工具（成分句法）
- innerHTML outerHTML innerText textContent的区别
- html快速入门（基础教程+资源推荐）
- URLForResource加载项目内的HTML
- HTML 字符实体 < >: &等
- HtmlAgilityPack下载开启压缩的页面乱码
- 怎样将用户名和密码保存到Cookie中？ (html部分)
- html可拖拽图片循环滚动切换
- 在django下解决找不到base.html的问题