JavaScript的DOM操作（01）
简介
<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>
<body>
<button>ClickMe</button>
</body>
1.如何获取元素
<script type="text/javascript">
//获取指定的元素节点.
window.onload = function(){
//1. 获取 id 为 bj 的那个节点.
//在编写 HTML 文档时, 需确保 id 属性值是唯一的.
//该方法为 document 对象的方法
var bjNode = document.getElementById("bj");
alert(bjNode);
//2. 获取所有的 li 节点.
//使用标签名获取指定节点的集合.
//该方法为 Node 接口的方法, 即任何一个节点都有这个方法.
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);
//若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()
//方法对于 IE 无效. 所以使用该方法时需谨慎.
var bjNode2 = document.getElementsByName("BeiJing");
alert(bjNode2.length);
}
</script>
<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>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
2.获取属性节点
<script type="text/javascript">
//读写属性节点: 通过元素节点 . 的方式来获取属性值和设置属性值.
window.onload = function(){
//属性节点即为某一指定的元素节点的属性.
//1. 先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2. 再读取指定属性的值
alert(nameNode.value);
//3. 设置指定的属性的值.
nameNode.value = "xxx";
//var nameAttr = nameNode.getAttributeNode("value");
//alert(nameAttr);
//alert("--" + nameAttr.nodeValue);
//nameAttr.nodeValue = "xxx";
}
</script>
<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="xxx"/>
</body>
3.获取元素节点
<script type="text/javascript">
//获取元素节点的子节点
window.onload = function(){
//1. 获取 #city 节点的所有子节点.
var cityNode = document.getElementById("city");
//2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
//但该方法不实用.
alert(cityNode.childNodes.length);
//3. 获取 #city 节点的所有 li 子节点.
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4. 获取指定节点的第一个子节点和最后一个子节点.
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
<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="atguigu"/>
</body>
4.获取文本节点
<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 = "xxx";
//alert(bjTextNode);
}
</script>
<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="xxx"/>
</body>
5.关于节点的属性: nodeType, nodeName, nodeValue
<script type="text/javascript">
//关于节点的属性: nodeType, nodeName, nodeValue
//在文档中, 任何一个节点都有这 3 个属性
//而 id, name, value 是具体节点的属性.
window.onload = function(){
//1. 元素节点的这 3 个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType); //元素节点: 1
alert(bjNode.nodeName); //节点名: li
alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null
//2. 属性节点
var nameAttr = document.getElementById("name")
.getAttributeNode("name");
alert(nameAttr.nodeType); //属性节点: 2
alert(nameAttr.nodeName); //属性节点的节点名: 属性名
alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值
//3. 文本节点:
var textNode = bjNode.firstChild;
alert(textNode.nodeType); //文本节点: 0
alert(textNode.nodeName); //节点名: #text
alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.
//nodeType、nodeName 是只读的.
//而 nodeValue 是可以被改变的。
//以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多.
}
</script>
<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="xxx"/>
</body>
6.回顾一下
<script type="text/javascript">
//1. 节点的类型: 元素节点、属性节点、文本节点
//通常情况下, 操作属性节点直接通过 "元素节点.属性名" 的方式来读写属性值
//而不是获取属性节点.
//2. 写 JS 代码的位置
//2.1 具体位置在哪
//2.2 window.onload 事件被触发的时间,
//以及如何为该事件赋值一个相应函数
//3. 获取获取元素节点
//3.1 根据 id 获取
//3.2 根据 标签名 获取: 该方法并非 document 对象所独有, 任何元素节点
//都可以调用该方法, 以获取指定的子节点.
//3.3 根据 name 属性名来获取: 若 HTML 元素本身没有 name 属性,
//我们硬添加一个 name 属性, 使用 getElementsByName(name)
//对于 ie 是不好用的。
//4. 获取子节点
//4.1 childNodes 属性: 获取指定元素的所有子节点, 但不怎么常用.
//4.2 firstChild、lastChild 属性: 获取元素节点的文本节点(如果一个元素
// 节点只有一个文本子节点).
//4.3 使用元素节点的 getElementsByTagName("方法");
//5. 读写文本节点:
//5.1 文本节点一定是元素节点的子节点
//5.2 步骤: 获取文本节点所在的元素节点 -> 利用 firstChild 获取文本节点
// -> 利用节点的 nodeValue 属性来读写文本值.
//6. 节点的属性: 所有节点都有的属性(按元素节点, 属性节点, 文本节点来说明)
//6.1 nodeType: 1, 2, 3 只读属性
//6.2 nodeName: 返回对应的节点的名字 只读属性
//6.3 nodeValue: null, 属性值, 文本值 可读写的属性.
//7. 属性节点:
//7.1 一般情况下不单独获取属性节点,
//而是通过 元素节点.属性名 的方式来读写属性值
window.onload = function(){
//弹出对话框.
//alert("helloworld");
//var bjNode = document.getElementById("bj");
//alert(bjNode);
//var liNodes = document.getElementsByTagName("li");
//alert(liNodes.length);
//var genderNodes = document.getElementsByName("gender");
//alert(genderNodes.length);
//var bjNodes = document.getElementsByName("BeiJing");
//alert(bjNodes.length);
//var cityNode = document.getElementById("city");
//var cityLiNodes = cityNode.getElementsByTagName("li");
//alert(cityLiNodes.length);
//var liChildren = cityNode.childNodes;
//alert(liChildren.length);
//var cityFirstChild = cityNode.firstChild;
//alert(cityFirstChild);
//var bjNode = document.getElementById("bj");
//alert(bjNode.firstChild.nodeValue);
//bjNode.firstChild.nodeValue = "xxx";
var nameNode = document.getElementsByName("username")[0];
alert(nameNode.value);
nameNode.value = "xxx";
}
</script>
<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>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="xxx"/>
</body>