innerText和textContent的兼容问题
目前浏览器都支持innerText，推荐使用，属于ie的标准
textContent本身是火狐支持，IE8不支持
innerText和textContent的区别
都可以设置标签的文本内容，如果要设置标签及内容推荐使用innerHTML
如果要获取标签中的文本，使用innerText，也可以使用innerHTML
如果要获取标签及文本，使用innerHTML
自定义属性的操作
自定义的属性：标签原本没有这个是孤星，为了存储数据，程序员自己添加的属性
自定义属性无法直接通过DOM对象的方式获取或设置，需使用特定方法
获取：
对象.getAttribute("自定义属性名")；
设置：
对象.setAttribute("自定义属性名"，值)；
移除属性：
对象。removeAttribute("属性名");
节点
文档：document--根节点的父节点，页面的最顶级对象
元素：页面中的所有标签，元素----element，标签----元素---对象
节点：页面中的所有内容(标签、属性、文本(文字、换行、空格、回车))，Node
根元素：html
节点操作的相关属性—作用
属性(可以使用标签--元素 .出来，可以使用属性节点 .出来，文本节点 .出来)：
nodeType(节点类型):
1----标签； 2---属性； 3---文本；
nodeName(节点名):
标签节点---大写的标签名，属性节点---小写的属性名，文本节点---#text
nodeValue(节点的值):
标签节点---null，属性节点---属性值，文本节点---文本内容
获取标签节点(=标签对象)的父级节点/元素--->属性
var obj = document.getElementById("---");
console.log(obj.parentNode); //1个
console.log(obj.parentElement) //1个
console.log(obj.parentNode.nodeType); //1(标签)
console.log(obj.parentNode.nodeName); //大写标签名
console.log(obj.parentNode.nodeValue); //null
获取标签节点的子级节点/元素--->属性
var obj = document.getElementById("---");
console.log(obj.childNodes); 多个
console.log(obj.children) !!! 多个
console.log(obj.childNodes.nodeType); //1(标签)
console.log(obj.childNodes.nodeName); //大写标签名
console.log(obj.childNodes.nodeValue); //null
获取属性节点 //获得标签对象-》获得该对象内的属性节点
var obj = document.getElementById("---");
var node = obj.getAttributeNode("id"); //获得id属性节点
console.log(node.nodeType); //1(标签)
console.log(node.nodeName); //大写标签名
console.log(node.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>
var threeObj = document.getElementById("three");
var dvobj = document.getElementById("dv");
var ulObj = document.getElementById("uu");
console.log(ulObj.parentNode); //父节点
console.log(ulObj.parentElement); //父元素
console.log(ulObj.childNodes); //子节点
console.log(ulObj.children); //子元素
//以上四行，所有浏览器都支持，以下IE8中所有节点为元素，所有元素不支持
console.log(ulObj.firstChild); //第一个子节点
console.log(ulObj.firstElementChild); //第一个子元素
console.log(ulObj.lastChild); //最后一个子节点
console.log(ulObj.lastElementChild); //最后一个子元素
console.log(threeObj.previousSibling); //某个元素的前一个兄弟节点
console.log(threeObj.previousElementSibling); //某个元素的前一个兄弟元素
console.log(threeObj.nextSibling); //某一个元素的下一个兄弟节点
console.log(threeObj.nextElementSibling); //某一个元素的下一个兄弟元素
</script>
</body>
总结：
1.凡是获取节点的代码在谷歌和火狐中得到的都是--相关的节点
2.凡是获取元素的代码在谷歌和火狐中得到的都是--相关的元素
3.从子节点和兄弟节点开始，凡是获取节点的代码在IE8中得到的是元素；
凡是获取元素的代码在IE8中得到的是undefined---元素的代码IE不支持
节点案例
1.通过节点操控元素的背景颜色
<body>
<input type="button" id="btn" value="变色"/>
<div id="dv" style="width: 200px;border: 1px solid #ccc">
<span>AAAAA</span>
<p>aaaaa</p>
<span>BBBBB</span>
<p>bbbbb</p>
<span>CCCCC</span>
<p>ccccc</p>
<span>DDDDD</span>
<p>ddddd</p>
<span>EEEEE</span>
<p>eeeee</p>
<span>FFFFF</span>
</div>
<script>
document.getElementById("btn").onclick = function () {
var dvObj = document.getElementById("dv");
var nodes = dvObj.childNodes;
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "red";
}
}
}
</script>
</body>
2.节点操作隔行变色
注意节点数与元素数的不同 ！！！
3.点小图，切换背景图片
<body>
<div id="mask">
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
</div>
<script>
var imgObj = document.getElementById("mask").children;
for(var i=0;i<imgObj.length;i++){
imgObj[i].onclick = function(){
document.body.style.backgroundImage = "url("+this.src+")";
};
}
</script>
</body>
4.全选/全不选
封装节点的兼容代码
获取任意一个父级元素的第一个子元素
function getFirstElementChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var node = element.firstChild; //防止不支持firstElementChild，且firstChild得到的不是标签节点
while(node&&node.nodeType!=1){ //有意义且不是标签节点
node = node.nextSibling; //下一个
}
return node;
}
}
获取任意一个父级元素的最后一个子元素
function getLastElementChild(element){
if(element.lastElementChild){
return element.lastElementChild;
}else{
var node = element.lastChild; //防止不支持firstElementChild，且firstChild得到的不是标签节点
while(node&&node.nodeType!=1){ //有意义且不是标签节点
node = node.previousSibling; //下一个
}
return node;
}
}
获取任意一个节点元素的前一个兄弟元素
获取任意一个节点元素的后一个兄弟元素
元素创建的三种方式
元素创建：为了提高用户的体验
1.document.write("标签的代码及内容")；
页面加载时可以正常创建元素
缺陷：如果是在页面加载完毕后，此时通过该方式创建元素，那么页面上的所有内容全部被覆盖消失
2.对象.innerHTML = "标签及代码"；
一般放入兄弟节点或子级节点的子级里
3.document.createElement("标签的名字");
(1)创建元素
(2)设置元素内容
(3)把元素追加到父级元素中
//点击按钮，在div中创建一个p标签
document.getElementById("btn").onclick=function(){
var pObj = document.createElement("p"); //创建p标签
setInnerText(pObj,"这是一个p标签"); //为p标签添加内容
document.getElementById("dv").appendChild(pObj); //将p标签追加到父级元素中
};
元素相关的操作方法
1. .appendChild()
2. .insertBefore("插入对象"，”位置对象“)
3. .replaceChild("替换对象"，”目标对象“)
4. .removeChild("移除对象")
案例
1.动态创建列表
<body>
<input type="button" id="btn" value="创建列表"/>
<div style="width: 300px;height: 200px;background-color: aqua;" id="dv">
</div>
<script>
var names = ["杨过","郭靖","黄蓉","宋青书","赵敏"];
document.getElementById("btn").onclick = function () {
var str = "<ul style="list-style-type:none;cursor:pointer">";
for(var i=0;i<names.length;i++){
str += "<li>"+names[i]+"</li>";
}
str += "</ul>";
document.getElementById("dv").innerHTML = str;
var list = document.getElementById("dv").getElementsByTagName("li");
for(var j=0;j<list.length;j++){
list[j].onmouseover = function(){
this.style.backgroundColor="yellow";
};
list[j].onmouseout = function(){
this.style.backgroundColor = "aqua";
};
};
};
</script>
</body>
2.动态创建表格
获得百度新闻代码
百度搜索-”百度新闻代码“
为元素绑定事件
1.对象.addEventListener("事件类型"，事件处理函数，false)； //IE8不支持、谷歌火狐支持
2.对象.attachEvent("事件类型"，事件处理函数)； //IE8支持，谷歌火狐不支持
一个元素可以注册多个事件
为元素绑定多个事件
三个参数：事件的类型/名字，没有on、事件处理函数(命名/匿名函数)、布尔类型(false)
对象.addEventListenter("click", function(){.....},false);
两个参数：事件类型有on、事件处理函数(命名/匿名函数)
对象.attachEvent("onclick", function(){.....});
为任意元素绑定任意事件—兼容函数
<body>
<input type="button" value="按钮" id="btn"/>
<script>
function my$(id){
return document.getElementById(id);
}
//为任意元素，绑定任意的事件----兼容代码
//参数：元素、事件类型、事件处理函数
function addEventListener(element,type,func){
if(element.addEventListener){
element.addEventListener(type,func,false)
}else if(element.attachEvent){
element.attachEvent("on"+type,func);
}else{
element["on"+type] = func;
}
}
addEventListener(my$("btn"),"click",function(){console.log("哈")});
addEventListener(my$("btn"),"click",function(){console.log("哈哈")});
addEventListener(my$("btn"),"click",function(){console.log("哈哈哈")});
</script>
</body>