DOM笔记2

大家好，又见面了，我是全栈君。

<!– 节点类型检查 if(someNode.nodeType==ElementNode){ alert(“Node is an element”); } 或者 if(someNode.nodeType==1){ alert(“Node is an element”); } 使用nodeName和nodeValue这两个属性 if(someNode.nodeType==1){ var someNode.nodeName();//nodeName的值是元素的标签名 } 每一个节点都有一个childNodes属性。当中保存NodeList对象，NodeList是一种类型数组对象，用于保存一组有序的节点 这个对象也有length属性，能够通过位置来訪问这些节点 var firstChild=someNode.childNodes[0]; var secondChild=someNode.childNodes.item(1); var length=someNode.childNodes.length; 每一个节点都有一个parentNode属性。该属性指向文档树中的父节点 if(someNode.nextSibling===null){ alert(“last node in the parent’s childNodes list…”); }else if(someNode.previousSibling===null){ alert(“First node in the parent’s childNodes list…”); 假设列表中仅仅有一个节点，那么该节点的nextSibling和previousSibling都为null } 父节点和第一个子节点和最后一个子节点也存在关系 firstChild lastChild 即存在这种关系 (someNode.childNodes[0]===someNode.firstChild) (someNode..childNodes[childNodes.length-1]===someNode.lastChild) 操作节点 最经常使用的方法是appendChilde();//用于向childNodesd的末尾加入一个节点 var returnNode=somenNode.appendChild(newNode); alert(returnNode==newNode);//true alert(someNode.lastChild==newNode);//true 使用insertBefore()方法将节点附加到ChildNodes的任何位置 var returnNode=someNode.appendChild(newNode,null); alert(returnNode==someNode.lastNode);//true //插入后成为一个子节点 var returnNode=someNode.appendChild(newNode,someNode.firstNode); alert(returnNode===newNode); alert(returnNode===someNode.firstNode); //插入后成为最后一个节点的前一个节点 var returnNode=someNode.appendChild(newNode,someNode.lastNode); alert(returnNode===someNode.childNodes.length-2);//true alert(returnNode===newNode);//true //注意：appendChild()和insertBefore不会删除节点 //replaceChild()方法接受两个參数，要插入的节点和要替换的节点，要替换的节点将由这种方法返回并从文档树中删除 //替换第一个子节点 var retuenNode=someNode.replaceChild(newNode,someNode.firstChild); //替换最后一个子节点 var returnNode=somNode.replaceChild(newNode,someNode.lastChild); //使用removeChild()方法删除一个子节点 var formerFirstNode=someNode.removeChild(someNode.firstNode); //删除最后一个子节点 var lastNode=someNode.removeChild(someNode.lastNode); //parentNode属性 。。。

//其它方法 cloneNode():用于创建调用这种方法的节点的全然一样的一个副本 CloneNode()接受一个布尔值用于运行是否深度复制，在參数为true时。运行深度复制 也就是复制节点和整个子树节点，在參数为FALSE时。仅仅复制本身 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> var deepList=Mylist.clondNode(true); alert(deeplist.childNodes.length); //查找元素 对于document对象来说，提供了两个方法 getElementById(); getElementsByTagName(); var images=document.getElementsByTagName(“img”); alert(images.length); alert(images.item(0).src); alert(images[0].src); //文档写入 write(),writeln(),open(),clost(); document.writeln(“当前的时间是：”+new Date()+”;”); //取得属性 var div=document.getElementById(“div”); alert(div.getAttribute(“id”)); alert(div.getAttribute(“title”)); alert(div.getAttribute(“class”)); alert(div.getAttribute(“dir”)); //设置属性 div.setAttribute(“id”,”someId”); div.setAttribute(“class”,”someClass”); //创建元素 var dir=document.createElement(“div”); //为元素的属性复制 dir.id=”someId”; dir.class=”someClass”; dir.height=”200″+”px”; dir.width=”200″+”px”; //将创建的元素加入到document.body元素中去 document.body.appendChilde(div); var dir=document.createElement(“<div…>”); –>

版权声明：本文博客原创文章。博客，未经同意，不得转载。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/117346.html原文链接：https://javaforall.cn