DOM学习_第三天
回顾上节内容
- 阻止超链接默认的跳转事件: return false;
获取元素的方式
根据id获取元素：document.getElementById("id属性的值");
根据标签名字获取元素：document.getElementsByTagName("标签的名字");
有的浏览器不支持, IE低版本的浏览器不支持,IE8以下的
根据name属性的值获取元素：document.getElementsByName("name属性的值");
根据类样式的名字获取元素：document.getElementsByClassName("类样式的名字");
根据选择器获取元素：document.querySelector("选择器");//返回一个对象
根绝选择器获取元素:document.querySelectorAll("选择器");//返回数组,多个元素组成的设置元素的样式的方式
对象.style.属性=值;
对象.className=值;innerText和textContent的兼容问题
目前的浏览器都支持innerText,应该是属于ie的标准
textContent本身是火狐支持,IE8不支持
innerText和innerHTML的区别
都可以设置标签的文本内容,如果要设置标签及内容推荐使用innerHTML
如果要获取标签中的文本,innerText,也可以使用innerHTML
如果想要获取的是有标签,也有文本—innerHTML- 自定义属性的操作
自定义属性:标签原本没有这个属性,为了存储数据,程序员自己添加的属性
自定义属性无法直接通过DOM对象的方式获取或者设置
获取自定义属性的值:对象.getAttribute("自定义属性名字");
设置自定义属性及值:对象.setAttribute("属性名字","值");
移除自定义属性及值:对象.removeAttribute("属性的名字");
节点的属性:(可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.点出来)
* nodeType:节点的类型:1—-标签,2—属性,3—文本
* nodeName:节点的名字:标签节点—大写的标签名字,属性节点—小写的属性名字,文本节点—-#text
* nodeValue:节点的值:标签节点—null,属性节点—属性值,文本节点—文本内容
01_节点的相关操作
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
div
var dvObj=document.getElementById("dv");
//获取里面的每个子节点
for(var i=0;i<dvObj.childNodes.length;i++){
var node=dvObj.childNodes[i];
//nodeType--->节点的类型:1---标签,2---属性,3---文本
//nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
//nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
}
//div
var dvObj=document.getElementById("dv");
//获取的是属性的节点
var node=dvObj.getAttributeNode("id");
console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);
//div
var dvObj=document.getElementById("dv");
//子节点
console.log(dvObj.childNodes.length);//7个子节点
//子元素
console.log(dvObj.children);
</script>
</body>02_12行代码
//12行代码:都是获取节点和元素的
//ul
var ulObj=document.getElementById("uu");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子节点
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
//总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
//凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
//从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持03_利用节点实现隔行变色
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>爆炒助教</li>
<li>油炸班主任</li>
<li>清蒸小苏</li>
<li>红烧班长</li>
<li>红烧肉</li>
<li>糖醋排骨</li>
<li>凉拌秋葵</li>
<li>鱼香胡萝卜丝</li>
</ul>
<script src="common.js"></script>
<script>
//隔行变色--li
my$("btn").onclick = function () {
var count=0;//记录有多少个li
//获取ul中所有的子节点
var nodes = my$("uu").childNodes;
for (var i = 0; i < nodes.length; i++) {
//判断这个节点是不是li标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;//8个
//nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
}
}
};
</script>
</body>04_兼容代码
<body>
<ul id="uu">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
//第一个节点和第一个元素的获取的代码在IE8中可能不支持
//element.firstChild--->谷歌和火狐获取的是第一个子几点
//element.firstChile--->IE8获取的是第一个子元素
//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if(element.firstElementChild){//true--->支持
return element.firstElementChild;
}else{
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{
var node=element.lastChild;//第一个节点
while (node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
console.log(getFirstElementChild(my$("uu")).innerText);
console.log(getLastElementChild(my$("uu")).innerText);
//最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
//前一个节点和前一个元素的获取的代码在IE8中可能不支持
//后一个节点和后一个元素的获取的代码在IE8中可能不支持
//学习节点操作还是为了操作元素
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
function getNextElementChild(element){
if(element.nextElementSibling){
return nextElementSibling;
}else{
var node = element.nextSibling;
while(node&&node!=1){
node = node.nextSibling;
}
return node;
}
}
</script>
</body>05_切换背景图片
<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 imgObjs=my$("mask").children;//获取的所有的子元素
//循环遍历所有img,注册点击事件
for(var i=0;i<imgObjs.length;i++){
imgObjs[i].onclick=function () {
document.body.style.backgroundImage="url("+this.src+")";
};
}
</script>
</body>06_全选和全不选
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="common.js"></script>
<script>
//获取全选的这个复选框
var ckAll = my$("j_cbAll");
//获取tbody中所有的小复选框
var cks = my$("j_tb").getElementsByTagName("input");
//点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
ckAll.onclick = function () {
//console.log(this.checked);
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
};
//获取tbody中所有的复选框,分别注册点击事件
for(var i=0;i<cks.length;i++){
cks[i].onclick=function () {
var flag=true;//默认都被选中了
//判断是否所有的复选框都选中
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
//没选中就进来了
flag=false;
break;
}
}
//全选的这个复选框的状态就是flag这个变量的值
ckAll.checked=flag;
};
}
</script>
</body>元素创建—–为了提高用户的体验
元素创建的三种方式:
1. document.write(“标签的代码及内容”);
2. 对象.innerHTML=”标签及代码”;
3. document.createElement(“标签的名字”);
08_第一种元素创建方式
//document.write("标签代码及内容");
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
// document.write("<p>这是一个p</p>");
//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉09_第二种元素创建方式
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};10_第三种元素创建方式
<style>
div {
width: 200px;
height: 150px;
border: 2px dashed pink;
}
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//第三种方式创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};
</script>11_点击按钮创建列表
<style>
div {
width: 300px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
// my$("btn").onclick=function () {
// my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li> <li>张三丰</li></ul>";
// };
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应对数的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list = my$("dv").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
//鼠标进入
list[i].onmouseover = function () {
this.style.backgroundColor = "yellow";
};
//鼠标离开
list[i].onmouseout = function () {
this.style.backgroundColor = "";
};
}
};
</script>
</body>12_动态创建列表
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>13_点击按钮创建一个表格
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.google.com"},
{name:"优酷",href:"http://www.youku.com"},
{name:"土豆",href:"http://www.tudou.com"},
{name:"快播",href:"http://www.kuaibo.com"},
{name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
//点击按钮创建表格
my$("btn").onclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//创建第二个列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};
</script>
</body>14_元素相关的方法
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="干掉第一个子元素" id="btn2"/>
<input type="button" value="干掉所有子元素" id="btn3"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var i=0;
my$("btn").onclick=function () {
i++;
var obj= document.createElement("input");
obj.type="button";
obj.value="按钮"+i;
//my$("dv").appendChild(obj);//追加子元素
//把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj,my$("dv").firstElementChild);
//my$("dv").replaceChild();---自己玩
};
my$("btn2").onclick=function () {
//移除父级元素中第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
my$("btn3").onclick=function () {
//点击按钮删除div中所有的子级元素
//判断父级元素中有没有第一个子元素
while(my$("dv").firstElementChild){
my$("dv").removeChild(my$("dv").firstElementChild);
}
};
</script>
</body>15_只创建一个元素
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//有则删除,无则创建
//先判断有没有,有就删除,然后再创建
// my$("btn").onclick=function () {
// //判断,div中有没有这个按钮,有就删除
// //判断这个按钮的子元素是否存在
// if(my$("btn2")){//如果为true就有
// my$("dv").removeChild(my$("btn2"));
// }
// var obj=document.createElement("input");
// obj.type="button";
// obj.value="按钮";
// obj.id="btn2";
// my$("dv").appendChild(obj);
// };
my$("btn").onclick=function () {
//判断,div中有没有这个按钮,有就删除
//判断这个按钮的子元素是否存在
if(!my$("btn2")){//如果为true就有
var obj=document.createElement("input");
obj.type="button";
obj.value="按钮";
obj.id="btn2";
my$("dv").appendChild(obj);
}
};
</script>
</body>16_为元素绑定多个事件
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
//为元素绑定事件(DOM):一种,但是不兼容,有两种
//1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
//为按钮绑定点击事件
//参数1:事件的类型---事件的名字,没有on
// 参数2:事件处理函数---函数(命名函数,匿名函数)
//参数3:布尔类型,目前就写false-----
// 为同一个元素绑定多个相同的事件--
my$("btn").addEventListener("click",function () {
console.log("小苏猥琐啊");
},false);
my$("btn").addEventListener("click",function () {
console.log("小苏龌龊啊");
},false);
my$("btn").addEventListener("click",function () {
console.log("小苏邪恶啊");
},false);
my$("btn").addEventListener("click",function () {
console.log("小苏下流啊");
},false);
//参数1:事件类型---事件名字，有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦1");
});
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦2");
});
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦3");
});
</script>
</body>17_为元素绑定事件兼容代码
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});
// my$("btn")["on"+"click"]=function () {
//
// };
// function Person(name) {
// this.name=name;
// this.sayHi=function () {
// console.log("您好啊");
// };
// }
// var per=new Person("小明");
// if(per.sayHii){//判断这个对象中有没有这个方法
// per.sayHii();
// }else{
// console.log("没有这个方法");
// }
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
