JavaScript 07 DOM对象
DOM
Document Object Model 文档对象模型
- Document ：表示的就是整个HTML网页文档；
- Object ：表示将网页中的每个部分都转换为了一个对象；
- Model ：表示对象之间的关系，方便获取对象；
节点Node
是一个构成网页最基本属性的组成部分，网页中的每一个部分都可以是一个节点；
节点的类型不同，属性和方法也都不尽相同；
常用节点
- 文档节点，整个HTML文档；
- 元素节点，HTML文档中的标签；
- 属性节点，HTML文档元素的属性；
- 文本节点，HTML文档中的文本内容；
节点属性
| nodeNode | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
浏览器已经为我们提供文档节点，对象，这个对象就是window属性，可以在页面中直接使用，文档节点代表的是整个网页；
事件
就是文档或浏览器窗口中发生的一些特定的交互瞬间，即用户和浏览器之间的交互行为；
可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码才会被执行，这种写法称为结构行为耦合，不方便维护，不推荐使用；
可以为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，其对应的函数将会被调用；
文档的加载
浏览器在加载一个页面时，是按照自上而下的顺序加载的；
读取到一行就运行一行，如果将script标签写在页面的上面，在执行代码时，页面还没有加载；
将js代码编写到页面的下部是为了可以在页面加载完毕以后在执行js代码；
onload事件会在整个页面加载完成之后才会触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面将在完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了；
window.onload = function(){
}
在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取DOM对象；
DOM查询
获取元素节点
通过document对象调用
- getElementById()通过id属性获取一个元素节点对象；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btu001 = document.getElementById("btn01");
btu001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul>
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#phone的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
-
getElementByTagName()通过标签名获取一组元素节点对象，返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function(){
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for(var i = 0 ;i < li01.length; i++){
alert(li01[i].innerHTML);
}
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul>
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#phone的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- getElementByName()通过name属性获取一组元素节点对象；innerHTML通过这个属性可以获取到元素内部的html代码；innerHTML用于获取元素内部的html代码；对于自结束标签这个属性没有意义；
如果需要读取元素节点属性，直接使用元素.属性名
注意： class属性不能采用这种方式，读取class属性时需要使用元素.className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function(){
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for(var i = 0 ;i < li01.length; i++){
alert(li01[i].innerHTML);
}
}
// //为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function(){
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for(var i = 0 ;i < gender01.length; i++){
alert(gender01[i].value);
}
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul>
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#phone的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
获取元素子节点
通过具体的元素节点调用；
- getElementByTagName()方法返回当前节点的指定标签后代节点；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function(){
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for(var i = 0 ;i < li01.length; i++){
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function(){
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for(var i = 0 ;i < gender01.length; i++){
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function(){
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for(var i = 0 ;i < jijie01.length; i++){
alert(jijie01[i].innerHTML);
}
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul>
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#phone的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点，
根据DOM标签间的空白也会当成文本节点（IE8一下的浏览器不支持）； - childNodes属性表示当前所有的子节点；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function(){
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for(var i = 0 ;i < li01.length; i++){
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function(){
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for(var i = 0 ;i < gender01.length; i++){
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function(){
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for(var i = 0 ;i < jijie01.length; i++){
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function(){
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for(var i = 0 ;i < zijiedian.length; i++){
alert(zijiedian[i].innerHTML);
}
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul>
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#phone的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- firstChild属性表示当前所有的第一个子节点；
换行空格算文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function(){
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for(var i = 0 ;i < li01.length; i++){
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function(){
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for(var i = 0 ;i < gender01.length; i++){
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function(){
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for(var i = 0 ;i < jijie01.length; i++){
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function(){
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for(var i = 0 ;i < zijiedian.length; i++){
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function(){
// 返回#jieduan的第一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.firstChild;
alert(diyi.innerHTML);
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan"><li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- lastChild属性表示当前所有的最后一个子节点；
换行空格算文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function () {
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function () {
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for (var i = 0; i < li01.length; i++) {
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function () {
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for (var i = 0; i < gender01.length; i++) {
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function () {
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for (var i = 0; i < jijie01.length; i++) {
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function () {
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for (var i = 0; i < zijiedian.length; i++) {
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function () {
// 返回#jieduan的最后一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.lastChild;
alert(diyi.innerHTML);
}
//为id为btn07的按钮绑定一个单击响应函数
var btn007 = document.getElementById("btn07");
btn007.onclick = function () {
// 返回#chuntian的父节点
var chuntian = document.getElementById("chuntian");
var fujiedian = chuntian.parentNode;
alert(fujiedian.innerHTML);
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan">
<li>上学</li>
<li>工作</li>
<li>养老</li></ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的最后一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- children属性可以获取当前元素的所有的子元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li{
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p{
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function(){
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function(){
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for(var i = 0 ;i < li01.length; i++){
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function(){
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for(var i = 0 ;i < gender01.length; i++){
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function(){
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for(var i = 0 ;i < jijie01.length; i++){
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function(){
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for(var i = 0 ;i < zijiedian.length; i++){
alert(zijiedian[i].innerHTML);
}
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul>
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#phone的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- firstElementChild获取当前元素的第一个的子元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function () {
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function () {
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for (var i = 0; i < li01.length; i++) {
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function () {
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for (var i = 0; i < gender01.length; i++) {
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function () {
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for (var i = 0; i < jijie01.length; i++) {
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function () {
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for (var i = 0; i < zijiedian.length; i++) {
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function () {
// 返回#jieduan的第一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.firstElementChild;
alert(diyi.innerHTML);
}
//为id为btn07的按钮绑定一个单击响应函数
var btn007 = document.getElementById("btn07");
btn007.onclick = function () {
// 返回#chuntian的父节点
var chuntian = document.getElementById("chuntian");
var fujiedian = chuntian.parentNode;
alert(fujiedian.innerHTML);
}
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan">
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
通过具体的节点调用（获取父节点和兄弟节点）
- parentNode属性表示当前节点的元素；
innerText，该属性可以获取到元素内部的文本内容；和innerHTML类似，不同的是它会自动将html去掉；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
function bangDing (dianji, fun){
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function () {
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function () {
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for (var i = 0; i < li01.length; i++) {
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function () {
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for (var i = 0; i < gender01.length; i++) {
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function () {
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for (var i = 0; i < jijie01.length; i++) {
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function () {
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for (var i = 0; i < zijiedian.length; i++) {
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function () {
// 返回#jieduan的第一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.firstElementChild;
alert(diyi.innerHTML);
}
//为id为btn07的按钮绑定一个单击响应函数
bangDing ("btn07", function(){
// 返回#chuntian的父节点
var chuntian = document.getElementById("chuntian");
var fujiedian = chuntian.parentNode;
alert(fujiedian.innerText);
})
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan">
<li>上学</li>
<li>工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#Android的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- previousSibling属性表示当前节点前一个兄弟节点；包括空白文本；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
function bangDing (dianji, fun){
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function () {
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function () {
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for (var i = 0; i < li01.length; i++) {
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function () {
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for (var i = 0; i < gender01.length; i++) {
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function () {
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for (var i = 0; i < jijie01.length; i++) {
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function () {
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for (var i = 0; i < zijiedian.length; i++) {
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function () {
// 返回#jieduan的第一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.firstElementChild;
alert(diyi.innerHTML);
}
//为id为btn07的按钮绑定一个单击响应函数
bangDing ("btn07", function(){
// 返回#chuntian的父节点
var chuntian = document.getElementById("chuntian");
var fujiedian = chuntian.parentNode;
alert(fujiedian.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
bangDing ("btn08", function(){
// 返回#work的前一个兄弟节点
var xiongdi = document.getElementById("work");
var xiongdijiedian = xiongdi.previousSibling;
alert(xiongdijiedian.innerHTML);
});
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan">
<li>上学</li>
<li id="work">工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#work的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- nextSibling属性表示当前节点后一个兄弟节点；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
function bangDing (dianji, fun){
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function () {
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function () {
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for (var i = 0; i < li01.length; i++) {
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function () {
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for (var i = 0; i < gender01.length; i++) {
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function () {
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for (var i = 0; i < jijie01.length; i++) {
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function () {
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for (var i = 0; i < zijiedian.length; i++) {
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function () {
// 返回#jieduan的第一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.firstElementChild;
alert(diyi.innerHTML);
}
//为id为btn07的按钮绑定一个单击响应函数
bangDing ("btn07", function(){
// 返回#chuntian的父节点
var chuntian = document.getElementById("chuntian");
var fujiedian = chuntian.parentNode;
alert(fujiedian.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
bangDing ("btn08", function(){
// 返回#work的后一个兄弟节点
var xiongdi = document.getElementById("work");
var xiongdijiedian = xiongdi.nextSibling;
alert(xiongdijiedian.innerHTML);
});
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan">
<li>上学</li>
<li id="work">工作</li><li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#work的后一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
- previousElementSibling获取前一个兄弟元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.zuobu {
float: left;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
.xiabu {
width: 400px;
margin-top: 20px;
height: 100px;
border: black 2px solid;
}
</style>
<script>
window.onload = function () {
function bangDing (dianji, fun){
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
var btn001 = document.getElementById("btn01");
btn001.onclick = function () {
// 查找#chuntian节点
var chuntian01 = document.getElementById("chuntian");
// 可以通过innerHTML这个属性获取html内的代码
alert(chuntian.innerHTML);
}
//为id为btn02的按钮绑定一个单击响应函数
var btn002 = document.getElementById("btn02");
btn002.onclick = function () {
// 查找所有li节点
// getElementByTagName()通过标签名获取一组元素节点对象
// 返回一个类数组，即使查询到的元素只有一个，也会封装到数组中返回
var li01 = document.getElementsByTagName("li");
//li01的数组长度
alert(li01.length);
for (var i = 0; i < li01.length; i++) {
alert(li01[i].innerHTML);
}
}
//为id为btn03的按钮绑定一个单击响应函数
var btn003 = document.getElementById("btn03");
btn003.onclick = function () {
// 查找name=gender的所有节点
var gender01 = document.getElementsByName("gender");
//gender01的数组长度
alert(gender01.length);
// 对于自结束标签innerHTML没有意义
// 如果需要读取元素节点属性，直接使用 元素.属性名
for (var i = 0; i < gender01.length; i++) {
alert(gender01[i].value);
}
}
//为id为btn04的按钮绑定一个单击响应函数
var btn004 = document.getElementById("btn04");
btn004.onclick = function () {
// 查找#jijie下所有li节点
var jijie01 = jijie.getElementsByTagName("li");
//jijie01的数组长度
alert(jijie01.length);
for (var i = 0; i < jijie01.length; i++) {
alert(jijie01[i].innerHTML);
}
}
//为id为btn05的按钮绑定一个单击响应函数
var btn005 = document.getElementById("btn05");
btn005.onclick = function () {
// 返回#jijie的所有子节点
var jijie02 = document.getElementById("jijie");
// childNodes属性表示当前所有的子节点；这个属性会获取包括文本节点在内的所有节点
// var zijiedian = jijie02.childNodes;
// alert(zijiedian.length);
var zijiedian = jijie02.children;
alert(zijiedian.length);
for (var i = 0; i < zijiedian.length; i++) {
alert(zijiedian[i].innerHTML);
}
}
//为id为btn06的按钮绑定一个单击响应函数
var btn006 = document.getElementById("btn06");
btn006.onclick = function () {
// 返回#jieduan的第一个子节点
var jieduan01 = document.getElementById("jieduan");
var diyi = jieduan01.firstElementChild;
alert(diyi.innerHTML);
}
//为id为btn07的按钮绑定一个单击响应函数
bangDing ("btn07", function(){
// 返回#chuntian的父节点
var chuntian = document.getElementById("chuntian");
var fujiedian = chuntian.parentNode;
alert(fujiedian.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
bangDing ("btn08", function(){
// 返回#work的前一个兄弟节点
var xiongdi = document.getElementById("work");
var xiongdijiedian = xiongdi.previousElementSibling;
alert(xiongdijiedian.innerHTML);
});
}
</script>
</head>
<body>
<div id="zong">
<div class="zuobu">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个季节？</p>
<ul id="jijie">
<li id="chuntian">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
<p>你最喜欢的课程?</p>
<ul>
<li>语文</li>
<li>数学</li>
<li>物理</li>
<li>化学</li>
<li>生物</li>
</ul>
<p>你正处在哪个阶段?</p>
<ul id="jieduan">
<li>上学</li>
<li id="work">工作</li>
<li>养老</li>
</ul>
</div>
<!-- 下部 -->
<div class="xiabu">
gender:
<input type="radio" name="gender" value="male" />
Male
<input type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="你好呀！！" />
</div>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">查找#chuntian节点</button>
<button id="btn02">查找所有li节点</button>
<button id="btn03">查找name=gender的所有节点</button>
<button id="btn04">查找#jijie下所有li节点</button>
<button id="btn05">返回#jijie的所有子节点</button>
<button id="btn06">返回#jieduan的第一个子节点</button>
<button id="btn07">返回#chuntian的父节点</button>
<button id="btn08">返回#work的前一个兄弟节点</button>
<button id="btn09">返回#username的value属性值</button>
<button id="btn10">设置#username的属性值</button>
<button id="btn11">返回#chuntian的文本值</button>
</div>
</div>
</body>
</html>
其他方法
在document中有一个属性body，它保存的是body的引用；
document.documentElement保存的是html根标签；
document.all
代表页面中的所有元素（已被弃用）；
根据元素的class属性查询一组元素节点对象；
getElementByClassName()
可以根据class属性节点对象
document.querySelector()
需要一个选择器的字符串作为参数，可以根据css选择器来查询一个元素节点对象；
使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个；
document.querySelectorAll()
该方法和 document.querySelector()类似，不同的是它会将符合条件的元素封装到一个数组中返回；
即使符合条件的元素只有一个，也会返回数组；
DOM增删改
使用innerHTML也可以完成DOM的增删改的相关操作（动静过大，不建议使用），一般会两种方式结合使用（推荐）；
document.createTextElement()
用于创建一个元素节点对象，需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day25-JavaScript 07 DOM对象</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
float: left;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
</style>
<script>
window.onload = function () {
function bangDing(dianji, fun) {
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
bangDing("btn01", function () {
// 创建一个“广州”节点，添加到#city下
var chuntian = document.getElementById("bj");
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州 ");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.appendChild(li);
});
}
</script>
</head>
<body>
<div id="zong">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个城市？</p>
<ul id="chengshi">
<li id="bj">北京</li>
<li>上海</li>
<li>西安</li>
<li>四川</li>
</ul>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">创建一个“广州”节点，添加到#city下</button>
<button id="btn02">将“广州”节点插入到#bj前面</button>
<button id="btn03">使用“广州”节点替换#bj节点</button>
<button id="btn04">删除#bj节点</button>
<button id="btn05">读取#city内的HTML代码</button>
<button id="btn06">设置#bj内的HTML代码</button>
</div>
</div>
</body>
</html>
document.createTextNode()
可以用来创建一个文本节点的对象；
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回；
appendChild()
向一个父节点中添加一个新的子节点；
语法：父节点.appendChild(子节点);
insertBefore(新节点,旧节点)
可以在指定的子节点前插入新的子节点；
语法：父节点.insertBefore(新节点,旧节点);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day25-JavaScript 07 DOM对象</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
float: left;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
</style>
<script>
window.onload = function () {
function bangDing(dianji, fun) {
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
bangDing("btn01", function () {
// 创建一个“广州”节点，添加到#city下
var chuntian = document.getElementById("bj");
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.appendChild(li);
});
//为id为btn02的按钮绑定一个单击响应函数
bangDing("btn02", function () {
// 将“广州”节点插入到#bj前面
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
var beijing = document.getElementById("bj");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.insertBefore(li , beijing);
});
}
</script>
</head>
<body>
<div id="zong">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个城市？</p>
<ul id="chengshi">
<li id="bj">北京</li>
<li>上海</li>
<li>西安</li>
<li>四川</li>
</ul>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">创建一个“广州”节点，添加到#city下</button>
<button id="btn02">将“广州”节点插入到#bj前面</button>
<button id="btn03">使用“广州”节点替换#bj节点</button>
<button id="btn04">删除#bj节点</button>
<button id="btn05">读取#city内的HTML代码</button>
<button id="btn06">设置#bj内的HTML代码</button>
</div>
</div>
</body>
</html>
replaceChild()
可以使用指定的子节点替换已有的子节点；
语法：父节点.replaseChid(新节点,旧节点);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day25-JavaScript 07 DOM对象</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
float: left;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
</style>
<script>
window.onload = function () {
function bangDing(dianji, fun) {
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
bangDing("btn01", function () {
// 创建一个“广州”节点，添加到#city下
var chuntian = document.getElementById("bj");
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.appendChild(li);
});
//为id为btn02的按钮绑定一个单击响应函数
bangDing("btn02", function () {
// 将“广州”节点插入到#bj前面
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
var beijing = document.getElementById("bj");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.insertBefore(li , beijing);
});
// 为id为btn03的按钮绑定一个单击响应函数
bangDing("btn03", function(){
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为bj的节点
var beijing = document.getElementById("bj");
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
city.replaceChild(li,beijing);
});
}
</script>
</head>
<body>
<div id="zong">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个城市？</p>
<ul id="chengshi">
<li id="bj">北京</li>
<li>上海</li>
<li>西安</li>
<li>四川</li>
</ul>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">创建一个“广州”节点，添加到#city下</button>
<button id="btn02">将“广州”节点插入到#bj前面</button>
<button id="btn03">使用“广州”节点替换#bj节点</button>
<button id="btn04">删除#bj节点</button>
<button id="btn05">读取#city内的HTML代码</button>
<button id="btn06">设置#bj内的HTML代码</button>
</div>
</div>
</body>
</html>
removeChild()
可以删除一个子节点；
语法：子节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
.parentNode.removeChild()
自己删自己
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day25-JavaScript 07 DOM对象</title>
<!-- <link rel="stylesheet" href="../CSS/reset.css"> -->
<style>
#zong {
margin: 150px 100PX;
}
.anniu button {
width: 400px;
padding: 5px;
margin: 5px;
margin-top: 0;
}
.anniu {
width: 400px;
float: left;
}
.shangbu {
width: 400px;
border: black 2px solid;
float: left;
}
li {
display: inline-block;
background-color: cyan;
padding: 5px;
border: 1px solid #000;
}
p {
padding-left: 40px;
}
</style>
<script>
window.onload = function () {
function bangDing(dianji, fun) {
var btn = document.getElementById(dianji);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
bangDing("btn01", function () {
// 创建一个“广州”节点，添加到#city下
var chuntian = document.getElementById("bj");
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.appendChild(li);
});
//为id为btn02的按钮绑定一个单击响应函数
bangDing("btn02", function () {
// 将“广州”节点插入到#bj前面
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
var beijing = document.getElementById("bj");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// 将广州添加到city下
city.insertBefore(li, beijing);
});
// 为id为btn03的按钮绑定一个单击响应函数
bangDing("btn03", function () {
// 创建li元素节点
var li = document.createElement("li");
// 创建文本节点
var gz = document.createTextNode("广州");
// 将gz设置li的子节点
li.appendChild(gz);
// 获取id为bj的节点
var beijing = document.getElementById("bj");
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
city.replaceChild(li, beijing);
});
// 为id为btn04的按钮绑定一个单击响应函数
bangDing("btn04", function () {
// 获取id为bj的节点
var beijing = document.getElementById("bj");
// 获取id为chengshi的节点
var city = document.getElementById("chengshi");
// city.removeChild(beijing);
beijing.parentNode.removeChild(beijing);
});
}
</script>
</head>
<body>
<div id="zong">
<!-- 上部 -->
<div class="shangbu">
<p>你最喜欢哪个城市？</p>
<ul id="chengshi">
<li id="bj">北京</li>
<li>上海</li>
<li>西安</li>
<li>四川</li>
</ul>
</div>
<!-- 按钮 -->
<div class="anniu">
<button id="btn01">创建一个“广州”节点，添加到#city下</button>
<button id="btn02">将“广州”节点插入到#bj前面</button>
<button id="btn03">使用“广州”节点替换#bj节点</button>
<button id="btn04">删除#bj节点</button>
<button id="btn05">读取#city内的HTML代码</button>
<button id="btn06">设置#bj内的HTML代码</button>
</div>
</div>
</body>
</html>
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
