Javascript的各种节点操作实例演示代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title="Javascript的节点操作"></title>
<script type="text/javascript" src="jquery-1.7.js"></script>
</head>
<body>
<input type="button" id="test" name="nn" value="EFG">
<div id = "t">bbb</div>
<div name="parent_test">
<div id = "t1"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</div>
<div id = "fuzhi"><span>AAA</span><span>BBB</span><span>CCC</span></div><div id = "m"></div>
<script type="text/javascript">
//搞清楚这三种 元素节点 属性节点 文本节点
// 1:元素节点(对于元素节点，nodeName保存的始终是元素的标签名，而nodeValue的值始终是null)
var element_node=document.getElementById('test');
//alert(element_node.nodeType); // 1
//alert(element_node.nodeName); // input
//alert(element_node.nodeValue); // null
// 2:属性节点
var attr_node=document.getElementById('test').getAttributeNode('name');
alert(attr_node.nodeType); // 2
alert(attr_node.nodeName); // name 属性名
alert(attr_node.nodeValue); // nn 属性值
// 3:文本节点
var all=document.getElementById('t').firstChild;
//alert(all.nodeType); // 3
//alert(all.nodeName); // #text
//alert(all.nodeValue); // bbb 文本内容
var tt1=document.getElementById('t1');
//alert(tt1.firstChild.innerHTML); // aaa
//alert(tt1.lastChild.innerHTML); // ccc
var tt2=tt1.childNodes[1].innerHTML;
//alert(tt2);// bbb
var tt3=tt1.parentNode.getAttribute('name');
//alert(tt3); // parent_test
var tt4=tt1.childNodes[1];
//alert(tt4.nextSibling.innerHTML); // ccc
//alert(tt4.previousSibling.innerHTML); //aaa
// node方法的详细介绍
var tt5=document.getElementById('test');
var tt6=document.getElementById('t')
// hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false
//alert(tt5.hasChildNodes()); // false
//alert(tt6.hasChildNodes()); // true
//removeChild()方法：去除一个节点
var first_node=document.getElementById('t1').firstChild;
//document.getElementById('t1').removeChild(first_node); // 删除第一个节点 aaa
// appendChild()方法：添加一个节点 如果文档树中已经存在该节点，则将它删除，然后在新位置插入。
var first_node=document.getElementById('t1').firstChild;
//document.getElementById('t1').appendChild(first_node); // aaa变成了最后一个节点
// replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它
//insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入。
var newd=document.createElement("span");
newd.innerHTML="eee";
//document.getElementById('t1').appendChild(newd); // 加载一个子节点
var oldd=document.getElementById('t1').lastChild;
//document.getElementById('t1').replaceChild(newd,oldd); // 替换最后一个子节点
//document.getElementById('t1').insertBefore(newd,oldd); // 在指定位置前面插入一个节点 aaabbbeeeccc
// cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点。
var what=document.getElementById('fuzhi').cloneNode(true).innerHTML;
document.getElementById('m').innerHTML=what;
</script>
</body>
</html>
相关推荐
-
JavaScript节点及列表操作实例小结
本文实例总结了JavaScript节点及列表操作的方法.分享给大家供大家参考.具体如下: (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 appendChild() removeChild() replaceChild() insertBefore() (3)查找 getElementsByTagName() /
-
JavaScript操作HTML DOM节点的基础教程
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取.创建.修改.或删除节点. NOTE:下面提供的例子中的 element 均为元素节点. 获取节点 父子关系 element.parentNode element.firstChild/element.lastChild element.childNodes/element.children 兄弟关系 element.previousSibling/element.nextSibling element.previousElem
-
JavaScript原生节点操作小结
前言:原生是Javascript的基础,还是需要多多重视,时间长都忘记了,现在整理一下. 获取子节点 children 不是标准的dom属性,但是几乎被所有浏览器支持.不包含文本节点. 注意:在IE中,children包含注释节点. childNodes 是标准属性.返回所有子节点.包括文本节点. 获取第一个子节点 1.firstChild document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild 获取最后一
-
js和jquery对dom节点的操作(创建/追加)
复制代码 代码如下: <script src="jquery-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#Button1').click(function () { // var ha = '<p>a</p>'; // $('div').app
-
javascript学习笔记(十九) 节点的操作实现代码
本节要用到的html例子 复制代码 代码如下: <ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> 1.创建元素节点 document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点 复制代码 代码如下: var div = document.createEle
-
JavaScript 节点操作 以及DOMDocument属性和方法
属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回
-
JavaScript DOM节点操作方法总结
节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素.具体的查找方法如下: getElementByID() // 得到单个节点 getElementsByTagName() // 得到节点数组 NodeList getElementsByName() // 得到节点数组 NodeList 同时还可以利用元素节点的属性获取它的
-
js操作DOM--添加、删除节点的简单实例
js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""
-
使用js完成节点的增删改复制等的操作
需求:完成节点的增删改复制的操作 用到的方法和属性: 1.获取某个节点的父节点 parentNode属性 2.获取某个节点的子节点集合 childNodes属性 3.创键一个新的节点 createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好 createElement(对象) document对象的方法 例如:document.createElement("a"); 4.给某个节点对象添加属性和属性值 setAttribute(属性,属性值
-
Js操作树节点自动折叠展开的几种方法
1.方法一 复制代码 代码如下: var tree = L5.getCmp('edocOutfileRelationTree'); //增加选择树,节点自动折叠 tree.on("click", function(node,e){ node.getUI().toggleCheck(true); }); tree.root.expand(); 2.方法二 复制代码 代码如下: var tree = L5.getCmp('orgstrutree'); //增加选择树,节点自动折叠 tree
-
javascript dom操作之cloneNode文本节点克隆使用技巧
true:完全的复制一个节点,什么叫完全呢,就是复制一切,包括他的子节点,以至于文本节点,凡是有的,一律克隆,所谓完全 false:只克隆当前节点,不克隆任何的子节点,当然也不会克隆他所包裹的文本,因为任何文本都有指向他的节点(文本节点) 当然有时候两者是可以通用的哦,如果要复制的节点没有任何的子节点,这是二者全等:比如 img... 为了让大家理解的更为深刻,举个小例子吧: 复制代码 代码如下: <div> <span>Shadow</span> |No Shadow