节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
nodeType--->节点的类型:1----标签,2---属性,3---文本
nodeName--->节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
nodeValue--->节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
获取父节点：.parentNode
获取父元素：.parentElement
获取子节点：.childNodes
获取子元素：.children
<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> // //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
12行代码
<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> //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(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>
//总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点 //凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素 //从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
节点兼容代码
<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>
元素创建的三种方式
元素创建-----为了提高用户的体验
元素创建的三种方式:
1. document.write("标签的代码及内容");
2. 对象.innerHTML="标签及代码";
3. 创建：document.createElement("标签的名字"); 添加：appendChild(元素对象)
第一种
<input type="button" value="创建一个p" id="btn"/> 小苏是一个快乐的小男孩,人家今年才38岁.好帅哦 <script src="common.js"></script> <script> //document.write("标签代码及内容"); my$("btn").onclick=function () { document.write("<p>这是一个p</p>"); }; // document.write("<p>这是一个p</p>"); //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉 </script>
第二种
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>"; } </script>
第三种
<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>
元素的增删
<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>
只创建一个元素
<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>
为元素绑定多个事件
<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>
多个事件兼容代码
<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>
