* 文档:document
* 元素:页面中所有的标签,元素---element, 标签----元素---对象
* 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
* 根元素:html标签
* 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
* nodeType:节点的类型:1----标签,2---属性,3---文本
* nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
* nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
案例:获取相关的节点
<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>
var ulObj=my$("uu");
console.log(ulObj.parentNode);//div
console.log(ulObj.parentNode.parentNode);//body
console.log(ulObj.parentNode.parentNode.parentNode);//html
console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document
console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//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
//nodeType--->节点的类型:1---标签,2---属性,3---文本
//nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
//nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
案例:节点的遍历
var dvObj=document.getElementById("dv");
for(var i=0;i<dvObj.childNodes.length;i++){
console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
}
//获取的是属性的节点
var node=dvObj.getAttributeNode("id");
//子节点
console.log(dvObj.childNodes);//7个子节点
//子元素
console.log(dvObj.children);
案例:获取相关的节点
//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);
案例:修改指定标签的背景色
<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";
}
}
};
案例:隔行变色
<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";
}
}
};
案例:浏览器兼容性解决
//element.firstChild--->谷歌和火狐获取的是第一个子节点
//element.firstChile--->IE8获取的是第一个子元素
//element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
if(element.firstElementChild){//true--->支持
return element.firstElementChild;
}else{
代码的解释:走到这里说明浏览器为IE或者其他的浏览器,所以该方法获得的可能是IE(元素)、其他(节点)
先得到该元素,进行判断,如果该节点存在,而且是标签,在进行返回。
注:比如空格,也可以是nextSibling返回的内容
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;
}
}
案例:背景图片的切换
<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>
案例:全选与全不选
<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;
};
}
元素的创建
* 元素创建的三种方式:
* 1. document.write("标签的代码及内容");
* 2. 对象.innerHTML="标签及代码";
* 3. document.createElement("标签的名字");
案例:使用第一种方式创建一个标签
*注:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
案例:第二种方式内容同样存在覆盖
<input type="button" value="创建一个p" id="btn" />
<div id="dv">粉色发放</div>
<script src="common.js"></script>
<script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};
案例:点击事件,创建列表
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;
案例:第三种创建元素的方式
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};
案例:动态创建里列表(第三种方式)
<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 = "";
}
案例:动态创建表格
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);
}
};
案例:元素的方法演示
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);
}
案例:只添加一个元素
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);
}
};
//为元素绑定事件(DOM):一种,但是不兼容,有两种
//1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
my$("btn").addEventListener("click",function () {
console.log("java");
},false);
my$("btn").addEventListener("click",function () {
console.log("javaScript");
},false);
//--------------------------------------------------
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦1");
});
my$("btn").attachEvent("onclick",function () {
console.log("小杨好帅哦2");
});
案例:解决绑定多个事件,浏览器兼容问题的方法抽取
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
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;
}
}