从零开始 DOM操作 笔记

 

 

　　　　<div id="box" class="box"></div>

 

-->　　var myBox = document.getElementById("box");

 

-->　　var myDivList = document.getElementsByTargetName(div);    　　 // 注意    Eelements

 

-->　　var myDivs = div.getElementsByClassName("box");                　　//注意     Elements

 

 

-->　　通过class选：支持IE9+

 

　　　　兼容写法：

　　　　function getElementsByClassName(node,className){
    　　　　if(node.getElementsByClassName){
        　　　　return node.getElementsByClassName(className)
    　　　　}else{
        　　　　var results = [];
        　　　　var items = node.getElementsByTagName("*");
        　　　　for (var i = 0; i < items.length; i++) {
            　　　　if(items[i].className == className){
               　　　　 results.push(items[i]);
            　　　　} 
        　　　　};
       　　　　 return results;
   　　　　 }
　　　　}

 

-->　　 getAttribute();  setAttribute("id","app")

-->　　 nodeName   nodeValue     nodeType    

 　　　　

　　　  元素节点   -->

 　　　 getAttributeNode() -->nodeType=2

  　　　文本节点 --> 3

　　　　

　　　　

 

--> childNodes    firstChild    lastChild    parentNode  nextSiblling

 

--->window打开新窗口： 　　

 

　　

 

 -->  addLoadEvent

 

　　

 

 -->三元操作符   

　　var a,b;

　　 if(a > 1){b=a+1}else{b=a-1}  ==>    a>1 ? b = a+1 : b = a - 1;

 

 

-->  document.write 和   innerHTML

 

 

-->  document.creatElement("p");  　　　　　　//创建 元素节点

　　 document.craeatTextNode();   　　　　　　//创建文本节点

--> parent.appendChild(child)

 

--> parentElement.insertBefore(newElement,targetElement);

--> 自己实现   insertAfter方法：

　　function insertAfter(newEl,targetEl){
　　　　var parentEl = targetEl.parentNode;
　　　　if(parentEl.lastChild == targetEl){
　　　　　　parentEl.appendChild(newEl);
　　　　}else{
　　　　　　parentEl.insertBefore(newEl,targetEl.nextSibling);
　　　　}
　　}

-->  nextSibling    与 自己创建的  getNextElement()函数：

　　nextSibling  挨着的节点    利用 nodeType验证      1  对应 元素节点   

　　　　　　　　　　　　　　　　　　　　　　　　　    2  对应 属性节点

　　　　　　　　　　　　　　　　　　　　　　　　　　 3  对应文本节点

　　

　　下一个节点元素函数：

　　function getNextElement(node){

　　　　　　if(node.nodeType == 1){

　　　　　　　　return node;

　　　　　  }

　　　　　　if(node.nextSibling){

　　　　　　　　return getNextElement(node.nextSibling);     // 递归

　　　　　　}

　　　　　　return null;

　　}

-->  addClass方法：

　　

　　function addClass(node,value){
　　　　if(!node.className){
　　　　　　node.className = value;
　　　　}else{
　　　　　　//直接用属性设置
　　　　　　//node.setAttribute("class",node.className+" "+value)
　　　　　　newClassName = node.className;
　　　　　　//classname 之间的空格 不能缺失
　　　　　　newClassName+=" ";
　　　　　　newClassName+=value;
　　　　　　node.className = newClassName;
　　　　}
　　}　　

-->子元素节点：

　　

　　function childElement(el){
　　　　var result=[];
　　　　for (var i = 0; i < el.childNodes.length; i++) {
　　　　　　if(el.childNodes[i].nodeType == 1){
　　　　　　result.push(el.childNodes[i]);
　　　　　　}
　　　　};
　　　　return result;

　　}

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

代码书写习惯，
a,  行末逗号
b,  空格缩进
c,  函数名称后无空格
d,  函数参数与括号间无空格
e,  对象字面量的冒号后加空格,冒号前不加
f,  条件语句关键字后加空格 

 

 

 

 

 

 注：截图源于 《 DOM编程艺术第二版》。只做分享，如有侵权，请联系本人，会马上删除！