目录
Tips
节点与元素:
- 元素:页面中所有的标签,元素---element, 标签----元素---对象;根元素:html标签
- 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
节点的属性:
(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
- nodeType:节点的类型:1----标签,2---属性,3---文本
- nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
- nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
获取结节点的方法:
- nodeType--->节点的类型:1---标签,2---属性,3---文本
- nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
- nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
//ul标签的父级节点
console.log(ulObj.parentNode);
//ul标签的父级元素
console.log(ulObj.parentElement);
console.log(ulObj.parentNode.nodeType);//标签的---1
console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
console.log(ulObj.parentNode.nodeValue);//标签---null
//根据属性获取节点
var node=dvObj.getAttributeNode("id");
var dvObj=document.getElementById("dv");
//子节点
console.log(dvObj.childNodes);//7个子节点
//子元素
console.log(dvObj.children);
- 凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
- 凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
- 从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
- 获取节点和元素的代码:
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);
console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling.innerText);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling.innerText);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
节点兼容代码:
<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中可能不支持
</script>
元素创建的三种方式
- document.write("标签的代码及内容");
<script> //document.write("标签代码及内容"); my$("btn").onclick=function () { document.write("<p>这是一个p</p>"); }; // document.write("<p>这是一个p</p>"); //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉 </script>
- 对象.innerHTML="标签及代码";
<script> //点击按钮,在div中创建一个p标签 //第二种方式创建元素: 对象.innerHTML="标签代码及内容"; my$("btn").onclick=function () { my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>"; }; </script>
- document.createElement("标签的名字");
<script> //第三种方式创建元素 //创建元素 //document.createElement("标签名字");对象 //把元素追加到父级元素中 //点击按钮,在div中创建一个p my$("btn").onclick = function () { //创建元素的 var pObj = document.createElement("p"); setInnnerText(pObj, "这是一个p"); //把创建后的子元素追加到父级元素中 my$("dv").appendChild(pObj); }; </script>
元素绑定多个事件
//为元素绑定事件(DOM):一种,但是不兼容,有两种
//1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
//为按钮绑定点击事件
//参数1:事件的类型---事件的名字,没有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
//参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说
//为同一个元素绑定多个相同的事件--
// my$("btn").addEventListener("click",function () {
// console.log("1");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("2");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("3");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("4");
// },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>
元素绑定事件的兼容代码
<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");
});
</script>
代码
1.案例点击按钮设置div中p标签改变背景颜色
<div id="dv">
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//先获取div
var dvObj = my$("dv");
//获取里面所有的子节点
var nodes = dvObj.childNodes;
//循环遍历所有的子节点
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是p标签
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "red";
}
}
};
//点击按钮,设置p变色---节点的方式做
</script>
2.节点操作隔行变色
<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>
3.切换背景图片
<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>
4.全选和全不选的实现
<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>
5.点击按钮创建一个图片
<script>
//点击按钮,在div中创建一个图片
my$("btn").onclick=function () {
my$("dv").innerHTML="<img src='images/liuyan.jpg' alt='美女' />";
};
</script>
6.点击按钮创建列表
<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>
7.点击按钮动态创建列表
<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>
8.案例点击按钮创建一个表格
<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>
9.按钮删除第一个及按钮删除所有元素
<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>
10.修改前面的bug,点击按钮最多只创建一个元素
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);
}
};