发表于： 2020-07-17 22:43:39
1 1151
今天完成的事情：
学习使用jsDOM
学习使用js轮播图
练习：html
<div class="total">
<div class="inner">
<p>你喜欢哪个城市</p>
<ul id="city">
<li id="bj">北京</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 />
<p>你手机的操作系统是？</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
</div>
<div class="inner">
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="abcde" />
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的第一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
js：
<script>
/* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* iddStr 要绑定绑定单击响应函数的对象的id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function () {
// 为id为btn01的链接绑定一个响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 查找#bj节点
var bj = document.getElementById("bj");
// 打印bj
// innerHTML 通过这个属性可以获取到元素内部的HTML代码
alert(bj.innerHTML);
};
// 为id为btn02的按钮绑定一个单击响应函数
var btn2 = document.getElementById("btn02");
btn02.onclick = function () {
// 查找所有li节点
// getElementsByTagName()可以根据标签名来获取一组元素节点对象
// 这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
var lis = document.getElementsByTagName("li");
// 打印lis
alert(lis.length);
// 变量lis
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML)
}
};
// 为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
// 查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
// alert(inputs.length);
for (var i = 0; i < inputs.length; i++) {
// innerHTML用于获取元素内部的HTML代码
// 对于自结束标签,这个属性没意义
// alert(inputs[i].innerHTML);
// 如果需要读取元素节点属性,
// 直接使用元素.属性名
// 例子:元素.id 元素.name 元素.value
// 注意:class属性不能采用这种方式,读取class属性时需要使用 元素.className
alert(inputs[i].name);
}
};
// 为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
// 获取id为city的元素
var city = document.getElementById("city");
// 查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
// 为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
// 获取id为city的节点
var city = document.getElementById("city");
// 返回#city的所有子节点
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签间的空白也会当成文本节点
*/
/*
var cns = city.childNodes;
alert(cns.length);
for (var i = 0; i < cns.length; i++) {
// alert(cns[i].innerHTML);
}
*/
// children属性可以获取当前元素的所有子元素
var cns2 = city.children;
alert(cns2.length);
};
// 为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
// 获取id为phone的元素
var phone = document.getElementById("phone");
// 返回#phone的第一个节点
// phone.childNodes[0];
// firstChild可以获取到当前元素的第一个子节点(包括空白节点)
var fir = phone.firstChild;
// firstElementChild获取当前元素的第一个子元素
fir = phone.firstElementChild;
alert(fir);
};
// 为id为btn07的按钮绑定一个单击响应函数
myClick("btn07", function () {
// 获取id为bj的节点
var bj = document.getElementById("bj");
// 返回#bj的父亲节
var pn = bj.parentNode;
// alert(pn.innerHTML);
/*
* innerText
* -该属性可以获取到元素内部的文本,和innerHTML类似，不同的是会自动将html去除
*/
alert(pn.innerText)
});
// 为id为btn07的按钮绑定一个单击响应函数
myClick("btn08", function () {
// 获取id为android的元素
var and = document.getElementById("android");
// 返回#android的第一个兄弟节点(也可能是空白文本)
var ps = and.previousSibling;
alert(ps.innerHTML);
// previousElementSibling获取前一个兄弟元素
var pe = and.previousElementSibling;
alert(pe.innerHTML);
});
// 读取#username的value属性值
myClick("btn09", function () {
// 获取id为username的元素
var um = document.getElementById("username");
// 读取um为username的元素
// 文本框的value属性值，就是文本框中填写的内容
alert(um.value);
});
// 设置#username的value属性值
myClick("btn10", function () {
// 获取id为username的元素
var um = document.getElementById("username");
um.value = "今天天气不错~~~";
});
// 返回#bj的文本值
myClick("btn11", function () {
// 获取id为bj的元素
var bj = document.getElementById("bj");
alert(bj.innerHTML);
alert(bj.innerText);
// 获取bj中的文本节点
var fc =bj.firstChild
alert(fc.nodeValue);
alert(bj.firstChild.nodeValue)
});
};
返回列表
评论