javascript createElement insertBefore nextSiblin使用

2012阅读 0评论2010-10-20 yzgname
分类:

1、createElement
说明:
oElement = document.createElement(sTag)
Parameters
sTag Required. String that specifies the name of an element.
Return Value
Returns a reference to the new element.

作用:建立并返回一个TAGS(标签)对像。
我用到的实例:
var li = document.createElement("li");
将会得到一个LI,和常用的LI对象一样,可以给ID,INNERHTML之类的属性。

2、insertBefore
oElement = object.insertBefore(oNewNode [, oChildNode])
Parameters
oNewNode Required. Object that specifies the new element to be inserted into the document hierarchy. Elements can be created with the createElement method. 
oChildNode Optional. Object that specifies the placement of the new element. If this parameter is specified, the new element will be inserted immediately before this existing child element.
作用:把oNewNode 结点加进object容器作为firstChild,并返回新结点对像。
oChildNode是指在哪个旧结点之前,在IE里,oChildNode可以省略,在其它浏览就不可省略了。

我用到的例子:
var ul = $('list');//容器
   var li = document.createElement("li");
   if(!preObj){//第一次点击
    if($('vv0')){//列表没有内容
     newli = $('vv0');
    }else{//如果有,li0为最顶
     preObj = $('li0');
     var newli = ul.insertBefore(li,preObj);
    }
   }else{
    var newli = ul.insertBefore(li,preObj);
   }
   preObj = newli;

newli.innerHTML = "我是新的LI。";
如果需要插入到容器的最后面时,用:appendChild

3、parentNode

说明:
HTML N/A
Scripting [ oElement = ] object.parentNode
Possible Values
oElement Object that receives the parent node.
The property is read-only. The property has no default value.
Remarks
The topmost object returns null as its parent.

返回当前对像的父结点,即上级容器,我用到的实例:


  • delSp函数,将可以得到LI这个对像并传递,以往的做法,都是为LI起个ID,再用getElementById返回,由于是动态写入,就显得很麻烦。
    当然,parentElement也有可样的作用,但是FF不支持。

    insertBefore 语法:

    oElement = object.insertBefore(oNewNode, oChildNode)
    在 oChildNode 之前插入新的节点 oNewNode,返回插入了的这个新节点引用。
    在 IE 中如果省略 oChildNode,则当作追加 oNewNode,而其它浏览器中则不能省略,所以我们编程时,应该当作不可省略来使用。

    appendChild 语法:

    oElement = object.appendChild(oNode)
    oNode 作为 object 子结点的身份插入 object 的最后一个元素之后。
    示例:

     

    nextSibling
    定义和用法
      nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。   如果无此节点,则属性返回 null。
    语法:
      nodeObject.nextSibling

      注释:Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而 Mozilla 不会这样做。因此,在下面的例子中,我们会使用一个函数来检查首个子节点的节点类型。   元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。

      假设要取到所有页面中所有H1标题后面的下一个元素为其添加CSS属性.
      var heads = document.getElementsByTagName("h1");
      for(var i=0; i  var elements = nextnode(heads[i].nextSibling); //设置nextnode函数,返回值
      elements.style.color='red'; //为其添加样式
      }
      function nextnode(node){
      if(node.nodeType == 1){ //判断是否是元素节点,排除空的文本节点
      return node;
      }
      if(node.nextSibling){
      return nextnode(node.nextSibling);
      }
      }
      在所有的例子中,我们将使用 XML 文件 books.xml,以及 JavaScript 函数 loadXMLDoc()。
      下面的代码片段可取得 XML 文档中首个 元素的下一个同级子节点: <BR>  //check if the next sibling node is an element node <BR>  function get_nextsibling(n) <BR>  { var x=n.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } return x; } <BR>  xmlDoc=loadXMLDoc("books.xml"); <BR>  var x=xmlDoc.getElementsByTagName("title")[0];document.write(x.nodeName); <BR>  document.write(" = "); <BR>  document.write(x.childNodes[0].nodeValue); <BR>  var y=get_nextsibling(x); <BR>  document.write("<br />Next sibling: "); <BR>  document.write(y.nodeName); <BR>  document.write(" = "); <BR>  document.write(y.childNodes[0].nodeValue);</P> <P>输出:<BR>  title = Everyday Italian Next sibling: author = Giada De Laurentiis</P> <DIV></DIV> <DIV></DIV> </div> <div class="page">上一篇:<a href="/uid-725717-id-2060416.html">通过批处理启动和关闭应用程序</a><br> 下一篇:<a href="/uid-725717-id-2060418.html">jQuery API</a></div> <footer> <a href="http://blog.itpub.net/">ITPUB博客</a> | <a href="http://www.itpub.net">ITPUB论坛</a> | <a href="http://bbs.chinaunix.net/">chinaunix论坛</a><br> 北京皓辰网域网络信息技术有限公司. 版权所有 </footer> <script> $(function(){ $("#fenlei").click(function(){ $("#left_1").show(); $("#left_2").show(); }); }) </script> </body> </html> <script language="javascript" src="http://stat.it168.com/pv.js"></script> <script> function sendPV(){ var pvTrack = new PvTrack(); pvTrack.type = 35; // 频道类别ID pvTrack.channel = 531; // 频道ID pvTrack.pageType = 0; pvTrack.track(); } window.setTimeout("sendPV()", 1000); </script>