1.节点的兼容代码
<div id="dv">
<span>这是div中的第一个span标签</span>
<p>这是第二个元素, 一个p</p>
<ul id="uu">
<li>杨树林</li>
<li>神仙水</li>
<li>纪梵希</li>
<li>雅诗兰黛</li>
</ul>
<div>我是div</div>
</div>
<script src="common.js"></script>
<script>
//console.log(u.firstElementChild); // 在ie8中 不支持 返回的是undefined
//获取第一个子元素
function getFisrtELementChild(element) {
if(element.firstElementChild){// true 支持
return element.firstElementChild;
}else{
//return element.firstChild;
var node = element.firstChild;
while (node && node.nodeType != 1){
node = node.nextSibling
}
return node;
}
}
//获取最后一个子元素
function getlastELementChild(element) {
if(element.lastElementChild){// true 支持
return element.lastElementChild;
}else{
//return element.firstChild;
var node = element.lastChild;
while (node && node.nodeType != 1){
node = node.previousSibling
}
return node;
}
}
//测试
console.log(getFisrtELementChild(my$("uu")).innerText);
console.log(getlastELementChild(my$("uu")).innerText);
2点击给p标签添加背景颜色
<input type="button" value="点我" id="btn">
<div id="dv">
<span>这是span</span>
<h1>这是h1</h1>
<p>这是p</p>
<span>这是span</span>
<h5>这是h5</h5>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
</div>
<script src="common.js"></script>
<script>
//点击按钮设置p的背景颜色 用节点的属性来操作
my$("btn").onclick = function () {
// 设置计数器
var count = 0;
//获取div中所有的子节点
var dv = my$("dv").childNodes;
for(var i = 0 ; i < dv.length; i++){
//判断子节点的类型和标签名字
if(dv[i].nodeType == 1 && dv[i].nodeName == "P"){
dv[i].style.backgroundColor = "pink";
}
//隔行变色
if(dv[i].nodeType == 1 ){
dv[i].style.color= count%2 == 0 ? "red": "yellow";
count++;
console.log(count)
}
}
}
</script>
3点击更换背景图片
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("images/1.jpg");
}
#mask {
background-color: rgba(255, 255, 255, 0.3);
height: 200px;
text-align: center;
}
#mask img {
width: 200px;
margin-top: 35px;
cursor: pointer;
}
</style>
</head>
<body id="bd">
<div id="mask">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<script src="common.js"></script>
<script>
//需求: 点击更换背景图片
var imgs = my$("mask").children;
for(var i = 0 ; i < imgs.length ; i++){
imgs[i].onclick = function () {
my$("bd").style.backgroundImage = 'url('+this.src+')';
}
}
</script>
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
