码迷,mamicode.com
首页 > 编程语言 > 详细

时间久了基础都忘了吧,来回顾一下javascript节点吧!

时间:2015-07-08 22:50:15      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:兼容性   标签   逻辑性   节点   

程序员越做经验越丰富,工作越轻松,但是你是否还记得来时的路呢?让我们一起回顾一下,那些年我们一起学过的js节点知识吧,路漫漫其修远兮,吾将上下而求索!


根据 DOMHTML 文档中的每个成分都是一个节点。

DOM 是这样规定的:

 

整个文档是一个文档节点 

每个 HTML 标签是一个元素节点 

包含在 HTML 元素中的文本是文本节点 

每一个 HTML 属性是一个属性节点 

注释属于注释节点 

 

一、如何获得节点引用

 

    1.旧的获取节点引用方式

      getElementById()

      getElementByTagName()

      getElementByName()

劣势:

  浪费内存逻辑性不强

 

    2.通过节点  关系属性 获得节点的引用

      对象.parentNode  获得父节点的引用

      对象.childNodes  获得子节点的集合

      对象.firstChild  获得第一个子节点

      对象.lastChild   获得第一个子节点\

      对象.nextSibling 获得下一个兄弟节点的引用

      对象.previousSibling 获得上一个兄弟节点的引用

     劣势:

       兼容性不好。

      

二、节点的信息(属性)

 

             节点类型           节点名字        节点值

            nodeType(数值)       nodeName      nodeValue

 

元素节点         1                标签名         null   

属性节点         2                属性名        属性值

文本节点         3                 #text         文本

注释节点         8                 #comment      注释的文字

文档节点         9                 #document     null

 

 

 

节点操作:

一、创建节点

 

    1>创建元素节点

      document.createElement("元素标签名");

    2>创建属性节点

       document.createAttribute("属性名");

       对象.属性="属性值"

       对象.setAttribute(属性名,属性值)

       对象.getAttribute(属性名,属性值)

    3>创建文本节点

       对象.innerHTML="";

       document.createTextNode("文本");

 

二、追加到页面当中

 

    父对象.appendChild(追加的对象)  插入到最后

    父对象.insertBefore(要插入的对象,之前的对象)  插入到最后

 

三、修改(替换)节点

 

   父对象.replaceChild(要修改的对象,被修改的);

 

四、删除节点


   父对象.removeChild(删除的对象)

如果确定要删除节点,最好也清空内存  对象=null;


本文出自 “Mr.Zhu -- 技术交流” 博客,请务必保留此出处http://bjishu.blog.51cto.com/7481301/1672148

时间久了基础都忘了吧,来回顾一下javascript节点吧!

标签:兼容性   标签   逻辑性   节点   

原文地址:http://bjishu.blog.51cto.com/7481301/1672148

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!