javascript是什么意思中文翻译Node往往被翻译为节点,在一个对象(可以简单的理解为是HTML页面中),一个属性name="aaa"可以是一个节点,一个<div>……</div>也可以是一个节点,
在<body>……</body>中的,也是一个大大的节点。下面是一些有关Node的属性和方法,并没有包含部分不兼容IE和FF内容的讲解。
Node的属性介绍:
nodeType:显示节点的类型
nodeName:显示节点的名称
nodeValue:显示节点的值
attributes:获取一个属性节点
firstChild:表示某一节点的第一个节点
lastChild:表示某一节点的最后一个子节点
childNodes:表示所在节点的所有子节点
parentNode:表示所在节点的父节点
nextSibling:紧挨着当前节点的下一个节点
previousSibling:紧挨着当前节点的上一个节点
ownerDocument:(不知)
Node有各种各样的节点,我们先花一些时间认识他们,同时一并了解nodeType,nodeName 和nodeValue属性:
名称:元素节点
nodeType:ELEMENT_NODE
nodeType值:1
nodeName:元素标记名
nodeValue:null
<body>
<div id="t"><span></span></div>
</body>
<script>
var ElementById("t");
document.deType);
document.deName);
document.deValue);
//显示1DIV null
</script>
名称:属性节点
nodeType:ATTRIBUTE_NODE
nodeType值:2
nodeName:属性名
nodeValue:属性值
<div id="t"name="aaa"><span></span></div>
</body>
<script>
var ElementById("t").getAttributeNode("name");
document.deType);
document.deName);
document.deValue);
//显示2name aaa
</script>
名称:文本节点
nodeType:TEXT_NODE
nodeType值:3
nodeName:#text
nodeValue:文本内容
<body>
<div id="t">bbb</div>
</body>
<script>
var ElementById("t").firstChild;
document.deType);
document.deName);
document.deValue);
//显示3#text bbb
</script>
名称:CDATA文本节点(XML中传递文本的格式)
nodeType:CDATA_SECTION_NODE
nodeType值:4
nodeName:#cdata-section
nodeValue:CDATA文本内容
attributes属性,直接获取一个属性节点,注意这里要使用[],保持IE和FF的兼容性。
<body name="ddd">
<div id="t"name= "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var ElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//显示name aaa
firstChild和lastChild属性,表示某一节点的第一个和最后一个子节点:
<body>
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//显示aaa ccc
</script>
childNodes和parentNode属性,表示所在节点的所有子节点和所在节点的父节点,这里的childNodes注意是一个数组:
<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(Attribute("name"));
//显示bbb ddd
</script>
nextSibling和previousSibling属性,分别表示在parentNode的childNodes[]数组中,紧挨着当前节点的上一个和下一个节点:
<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ElementById("t").childNodes[1];
document.Sibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示ccc aaa
</script>
ownerDocument属性(不知如何使用)
Node的方法介绍:
hasChildNodes():判定一个节点是否有子节点
removeChild():去除一个节点
appendChild():添加一个节点
replaceChild():替换一个节点
insertBefore():指定节点位置插入一个节点
cloneNode():复制一个节点
normalize():(不知)
hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false
<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> <div id="m"></div>
</body>
<script>
ElementById("t").hasChildNodes());
ElementById("m").hasChildNodes());
//第一个true,第二个false
</script>
removeChild()方法:去除一个节点
<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ElementById("t").firstChild;
//<span>aaa</span>被去除
</script>
appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入。
<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ElementById("t").firstChild;
//<span>aaa</span>成了最后一个节点
</script>
replaceChild()方法:从文档树中删除(并返回)指定的子节点,用另一个节点来替换它。<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ateElement("span");
newd.innerHTML="eee";
var ElementById("t").lastChild;
//最后一项成了eee
</script>
insertBefore()方法:在指定节点的前面插入一个节点,如果已经存在,则删除原来的,然后在新位置插入
<body name="ddd">
<div id="t"><span>aaa</span><span>bbb</span><span>ccc</span></div> </body>
<script>
var ateElement("span");
newd.innerHTML="eee";
var ElementById("t").lastChild;
//在最后一项的前面多了一项eee
</script>
cloneNode()方法:复制一个节点,该方法有一个参数,true表示同时复制所有的子节点,false 表示近复制当前节点
<body name="ddd">
<div id= "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id= "m"></div>
</body>
<script>
var ElementById("t").cloneNode(false).innerHTML; ElementById("m").innerHTML=what;
//增加了一个aaabbbccc
</script>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论