DOM笔记2

DOM笔记2

全栈程序员-用户IM • 2022年1月7日上午11:00 • 未分类

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

<!–
节点类型检查
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…>”);

–>