DOM
DOM:Document Objective Model(文本对象模型)
- D: 文档 html文档或 xml文档
- O: 对象 document对象的属性和方法
- M: 模型
- DOM 是针对xml(html)的基于树的API。
- DOM 树:节点(node)的层次。
- DOM 把一个文档表示为一颗家谱树(父,子,兄弟)
- DOM 定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
节点及类型
- 元素节点
- 属性节点:元素的属性,可以直接通过属性的方式来操作。
- 文本节点:是元素节点的子节点
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//当整个HTML文档完全加载成功后触发window.onload事件。
window.onload = function () {
//获取所有的button节点,并获得第一个元素
var btn = document.getElementsByTagName("button")[0];
//为btn的onclick事件赋值:当点击button时,执行函数体
btn.onclick = function(){
//弹出helloworld
alert("hello world");
}
}
</script>
</head>
<body>
<button>ClickMe</button>
</body>
</html>
获取元素节点
-
document.getElementById: 根据id属性获取对应的单个节点(该方法为document对象的方法)
-
document.getElementsByTagName: 根据标签名获取指定节点集合(该方法为Node接口的方法,即任何一个节点都有这个方法)
- document.getElementsByName: 根据节点的name属性获取符合的节点集合(若HTML元素自身没有定义name属性,则用该方法对有些浏览器无效,所以使用时需谨慎)
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//获取指定元素的节点.
window.onload = function(){
//1.获取id为bj的那个节点.
var bjNode = document.getElementById("bj");
alert(bjNode);
//2.获取所有li节点.
//使用标签名获取指定节点集合
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//3.根据HTML 文档元素的 name属性名来过去指定的节点的集合.
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);
}
</script>
</head>
<body>
<head>
<p>你喜欢那个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单击游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</head>
</body>
</html>
读写属性节点
- 先获取某一指定的元素节点
- 再读指定元素节点的属性
- 设置指定元素节点的属性的值
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//读写属性节点:通过元素节点.的方式来获取属性值和设置属性值
window.onload = function(){
//属性节点为某元素节点的属性。
//1.先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2.获取指定元素节点的属性的值
alert(nameNode.value);
//3.设置指定的属性的值
nameNode.value = "James";
}
</script>
</head>
<body>
<p>你喜欢那个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单击游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
name: <input type="text" name="username" id="name" value="David"/>
</body>
</html>
获取元素节点的子节点
- 先获取某节点。
- 用childNodes方法获取指定元素节点的所有子节点。
- 获取指定节点的指定子节点
- 获取指定节点的第一个子节点或者最后一个子节点
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//获取元素节点的子节点
window.onload = function(){
//1.获取city 节点
var cityNode = document.getElementById("city");
//2.用childNodes方法获取指定元素节点的所有子节点。
//一共有9个(包括文本节点也是元素节点的子节点)
//该方法不实用。
alert(cityNode.childNodes.length);
//3.获取city节点的所有li子节点。
var cityNodes = cityNode.getElementsByTagName("li");
alert(cityNodes.length);
//4.获取指定节点的第一个子节点或者最后一个子节点
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
</head>
<body>
<p>你喜欢那个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li></ul>
<br><br>
<p>你喜欢哪款单击游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
name: <input type="text" name="username" id="name" value="David"/>
</body>
</html>
获取文本节点
-
获取文本节点所在的元素节点。
-
通过firstChild找到文本节点。
-
通过操作文本节点的nodeValue属性来读写文本节点的值。
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//获取文本节点
window.onload = function(){
//文本节点一定是元素节点的子节点。
//1. 获取文本节点所在的元素节点。
var bjNode = document.getElementById("bj");
//2. 通过firstChild找到文本节点。
var bjTextNode = bjNode.firstChild;
//3. 通过操作文本节点的nodeValue属性来读写文本节点的值。
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "沈阳";
//alert(bjTextNode)
}
</script>
</head>
<body>
<p>你喜欢那个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li></ul>
<br><br>
<p>你喜欢哪款单击游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
name: <input type="text" name="username" id="name" value="David"/>
</body>
</html>