DOM节点操作与节点之间关系浅析

操作节点

// 向节点的子节点列表的末尾添加新的子节点
someNode.appendChild(newchild)

例子
下面的函数将在文档末尾插入一个新段：

 代码如下 复制代码

function appendMessage (message) {
  var pElement = document.createElement("p");
  var messageNode = document.createTextNode(message);
  pElement.appendChild(messageNode);
  document.body.appendChild(pElement);
}

// 在已有的子节点前插入一个新的子节点

someNode.insertBefore(newchild, refchild)

下面的下面片段可创建一个新的 <book> 节点，并在文档中的最后一个 <book> 元素前插入此节点：

 代码如下 复制代码

//check if the last childnode is an element node
function get_lastchild(n)
{
var x=n.lastChild;
while (x.nodeType!=1)
{
x=x.previousSibling;
}
return x;
}

xmlDoc=loadXMLDoc("books.xml");
var newNode=xmlDoc.createElement("book");
var newTitle=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("A Notebook");
newTitle.appendChild(newText);
newNode.appendChild(newTitle);

xmlDoc.documentElement.insertBefore(newNode,get_lastchild(x));

 

// 将某个子节点替换为另一个
someNode.replaceChild(new_node, old_node)

下面的代码片段可替换首个 <book< 元素中的 <title> 元素：

 代码如下 复制代码

//check if first child node is an element node
function get_firstchild(n)
{
var x=n.firstChild;
while (x.nodeType!=1)
  {
  x=x.nextSibling;
  }
return x;
}

xmlDoc=loadXMLDoc("books.xml");

//create a title element and a text node
var newNode=xmlDoc.createElement("title");
var newText=xmlDoc.createTextNode("Giada's Family Dinners");
//add the text node to the title node,
newNode.appendChild(newText);

//replace the first child node with the new node
var x=xmlDoc.getElementsByTagName("book")[0];
x.replaceChild(newNode,get_firstchild(x));

//output all titles
var y=xmlDoc.getElementsByTagName("title");
for (i=0;i<y.length;i++)
  {
  document.write(y[i].childNodes[0].nodeValue);
  document.write("<br />");
  }
输出：
Giada's Family Dinners
Harry Potter
XQuery Kick Start
Learning XML

// 从子节点列表中删除某个节点
someNode.removeChild(node)

removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。

HTML代码

 代码如下 复制代码
<div id="test"> <p>我是将要被删除的节点</p></div>实例JavaScript代码
<script type="text/javascript">
function remove(){ 
var test = document.getElementById("test"); 
var children = test.childNodes; for(i=0;i<children.length;i++)
{  
test.removeChild(children[i]); }
}
</script>

删除节点示例

我是将要被删除的节点

remove() ，点击这个按钮就会将上面div的子结点全部删除。
从上面的JS代码可以看到，使用removeChild的格式为：

父节点.removeChild(子结点)

removeChild的返回值

removeChild删除节点后会返回被删除节点的引用，这样当我们以后再想重新将它添加到文档中，或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段：

var removed = xxx.removeChild(xxxx);

则removed就是被删除的节点，可以在后面的代码中使用。

创建节点、appendChild,insertBefore，DOM节点查找、增加节点

 代码如下 复制代码

<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
    function showpic(pic){
        var gallerynode = document.getElementById('gallery');
        source = pic.getAttribute('href');
        gallerynode.setAttribute('src',source);
        var text = pic.getAttribute('title');
        //alert(text);
        var des = document.getElementById('des');
        //alert(des.nodeValue); //返回 null
        //alert(des.childNodes[0].nodeValue); //该段才是获取文本节点的值
        des.childNodes[0].nodeValue = text;
    }
    //创建原素，并用appendChild追加到元素后面
    function t1(){
        var pnode = document.createElement('p');
        var text = document.createTextNode('给创建的文本节点增加内容,appendChild方法');
        pnode.appendChild(text);
         
        var art = document.getElementById('art');
        //alert(art);
        art.appendChild(pnode);
     
    }
    //利用insertBefore向元素前插入
    function t2(){
        var pnode = document.createElement('p');
        var art = document.getElementById('art');
        var zinode = art.children[0];
        art.insertBefore(pnode,zinode);//第一个参数表示待插入的，第二个是定位的位置
     
    }
 
</script>
 
<style type="text/css">
body{ background:#ccc;}
.container{ width:800px;  margin:0 auto;}
*{ margin:0; padding:0;}
ul{ list-style:none; padding:0; margin:0; width:300px; }
ul li{background:#ccc; float:left; margin-right:10px; margin-bottom:10px; margin:30px 10px;}
ul li a{ text-decoration:none; }
#gallery { border:2px solid #ccc; display:block; clear:both;}
#des{ border-bottom:1px solid red; width:400px; text-align:center; margin-bottom:10px; padding-bottom:5px; clear:both;  }
#art p{ width:200px; height:100px; background:red; margin-bottom:10px;}
</style>
</head>
 
<body>
    <div class='container'>
        <h1>My Image Gallery</h1>
        <ul>
            <li><a href='images/pic001.jpg' onmouseover="showpic(this)" onclick='return false;' title='变道车全负责' alt='' >01</a></li>
            <li><a href='images/pic002.jpg' onmouseover="showpic(this)" onclick='return false;' title='一个萝卜一个坑，一个厕所一人蹲' alt='' >02</a></li>
            <li><a href='images/pic003.jpg' onmouseover="showpic(this)" onclick='return false;' title='驶入禁止入段，造成碰撞事故' alt='' >03</a></li>
            <li><a href='images/pic004.jpg' onmouseover="showpic(this)" onclick='return false;' title='障碍物路段，避让原则' alt='' >04</a></li>
            <li><a href='images/pic005.jpg' onmouseover="showpic(this)" onclick='return false;' title='狭窄山体路段，避让原则' alt='' >05</a></li>
        </ul>
        <p id='des'>这是一段描述文字</p>
        <img id='gallery' src='images/pic001.jpg' alt='' />
        <div id='art'>
            <p>这是一个默认的P原素</p>
         
        </div>
        <p>
            <input type='button' value='增加节点' onclick='t1();' />
            <input type='button' value='往前面插入节点' onclick='t2();' />
        </p>
        <script type='text/javascript'>
            /*var des = document.getElementById('des');
            //alert(document.getElementsByTagName('a')[0].getAttribute('title'));
            des.childNodes[0].nodeValue = document.getElementsByTagName('a')[0].getAttribute('title');
            function autopic(){
                var anode =document.getElementsByTagName('ul')[0].getElementsByTagName('a');
                //alert(anode.length);
                for(var i =0 , len=anode.length ; i<len ; i++){
                    showpic(anode[i]);
                }
     
            }
            autopic();*/
        </script>
    </div>
</body>

节点关系

// 父节点
someNode.parentNode
// 子节点
someNode.childNodes
// 子节点个数
someNode.childNodes.length
// 第一个子节点
someNode.firstChild
// 最后个子节点
someNode.lastChild
// 上一个同胞节点
someNode.previousSibling
// 下一个同胞节点
someNode.nextSibling
 
// 仅元素节点 IE9 / chrome / firefox
 
// 子节点个数
someNode.childElementCount
// 第一个子节点
someNode.firstElementChild
// 最后个子节点
someNode.lastElementChild
// 上一个同胞节点
someNode.previousElementSibling
// 下一个同胞节点
someNode.nextElementSibling

时间： 2024-10-26 00:47:25

DOM节点操作与节点之间关系浅析的相关文章

用于节点操作的API，颠覆原生操作HTML DOM节点的API_javascript技巧

第一次看到敏捷开发的定义,我就被敏捷开发迷住了.通俗来说,敏捷开发可以让我们用过的代码可以再次重用,因为是再次重用,所以相对安全,再次调试也没有第一次那么费心,省时省力.不断重用代码的过程中把存在的bug不断的修复,也因为不断的去重用, 这个模板变得起越来越独立,适用的情况越来越广范,最后在安全方面达到铜墙铁壁,在开发方面达到随心所欲,在维护方面达到从容面对. 敏捷开发的确是利害,但如何练就这种深奥的武功呢?就我自身的情况靠人传授武功是不可能了,因为公司就我一个做开发的,苦思幂想之后,决定从开源

html dom节点操作

 DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML.    根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:    整个文档是一个文档节点  每个 HTML 元素是元素节点  HTML 元素内的文本是文本节点  每个 HTML 属性是属

jQuery遍历DOM节点操作之filter()方法详解_jquery

本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动态创建标签 var domDiv = document.createElment('div'); // 动态创建属性 domDiv.setAttribute('id', 'box'); // 动态设置内部html标签 domDiv.innerHTML = '<span>动态span</spa

JavaScript 节点操作 以及DOMDocument属性和方法_javascript技巧

属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

利用递归算法找到一张关系表中父节点和子节点并且进行修改他们的id

问题描述 利用递归算法找到一张关系表中父节点和子节点并且进行修改他们的id 利用递归算法找到一张关系表中父节点和子节点并且进行修改他们的id,修改父id的时候,先修改他下面的子节点id,这样一层层往上修改,最后修改父id.通过递归的方法一级级找,边找边修改,这个代码怎么实现?

socket-求助：SSDB的主从数据同步时，即使没有任何写操作主从节点也会频繁地进行数据交互

问题描述 求助:SSDB的主从数据同步时,即使没有任何写操作主从节点也会频繁地进行数据交互 我安装了SSDB后,分别启动了master和slave, 然后通过Debug日志,发现在刚启动copy完成后,就开始不停地重复进行sync, 就对已有的数据进行循环sync, SSDB理念不是只有在write的时候,才会进行sync同步吗? 经过测试,在write的时候,也会进行sync同步,但是我是很奇怪为什么不执行write的时候,主从socket还一直在进行同步, 求大神解答. 不甚感激 解决方案

PHP带节点操作的无限分类实现方法详解_php技巧

本文实例讲述了PHP带节点操作的无限分类实现方法.分享给大家供大家参考,具体如下: 包含(移动多个节点:移动单个节点:删除多个节点:删除单个节点:新增节点),另附数据库表结构 一.db sql语句 //db used for php无限分类 create table tree( id int(10) not null primary key auto_increment, name varchar(255) not null, lft int(10) not null default 0, rg

Javascript的各种节点操作实例演示代码_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="