一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了。

HTML DOM类型

Node类型

Javascript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。

除IE外其他浏览器都可以访问到这个类型。

每个节点都有一个NodeType属性,用于表明节点的类型,节点类型由在Node类型中定义的下列12个常数值来表示,任何节点类型必居其一。

根据这些常量值可以很容易的判断节点类型。

if(someNode.nodeType == Node.ELEMENT_NODE){//IE无效
alert("Node is an element!");
}
if(someNode.nodeType == 1){ //所有浏览器有效
alert("Node is an element!");
}
  1. Node.ELEMENT_NODE(1);   元素节点
  2. NOde.ATTRIBUTE_NODE(2);    节点属性
  3. Node.TEXT_NODE(3);    文本节点
  4. Node.CDATA_SECTION_NODE(4);   CDATA区域中的内容
  5. Node.ENTITY_REFERENCE_NODE(5);
  6. Node.ENTITY_NODE(6);
  7. Node.PROCESSING_INSTRUCTION_NODE(7);
  8. Node.COMMENT_NODE(8);    注释的文本节点
  9. Node.DOCUMENT_NODE(9);    document节点
  10. Node.DOCUMENT_TYPE_NODE(10);
  11. Node.DOCUMENT_FRAGMENT_NODE(11);    document片段
  12. Node.NOTATION_NODE(12);

JS操作DOM节点操作:

添加节点:

appendChild():通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。

复制节点:

cloneNode():复制当前节点,或者复制当前节点以及它的所有子孙节点。

判断是否拥有该节点:

hasChildNodes():如果当前节点拥有子节点,则将返回true。

插入节点:

insertBefore():给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。

删除节点:

removeChild():从文档树中删除并返回指定的子节点。

替换节点:

replaceChild():从文档树中删除并返回指定的子节点,用另一个节点替换它。

DOCUMENT类型:

查找节点:

getElementById()

getElementByTagName()

getElementByClassName()

js获取节点的DOM操作的更多相关文章

  1. 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  2. react.js 获取真实的DOM节点

    为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...

  3. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  4. js 第二篇 (DOM 操作)

    DOM 节点含有:元素节点,属性节点,文本节点. document.getElementById("id") //通过页面元素ID 值 捕获元素对象,得到的值为一个object 1 ...

  5. JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...

  6. js,jQuery和DOM操作的总结(二)

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  7. js,jQuery和DOM操作的总结(一)

    废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...

  8. js获取节点和编辑的方法

    创建新节点 1.创建一个DOM片段createDocumentFragment() 例如: var d=document.createDocumentFragment(); d.appendChild ...

  9. JS中常见原生DOM操作API

    摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...

随机推荐

  1. Oracle的内存结构

    备注:本图片截图自“炼数成金” Oracle的体系结构分为内存结构.进程,磁盘文件. 内存结构分为SGA, PGA.SGA是系统全局区,是所有的用户共享区,PGA是某个用户的私有区. SGA分为sha ...

  2. Android FM模块学习之三 FM手动调频

    前一章主要是FM的自动调频, 接下来我们就看看FM手动调频是如何进行的.如果不清楚FM自动调频的过程,请打开超链接查看FM搜索频率流程. 首先来看一下流程图: 2.滑动刻度盘HorizontalNum ...

  3. python import eventlet包时提示ImportError: cannot import name eventlet

    root@zte-desktop:/home/ubuntu/python-threads# cat eventlet.py #!/usr/bin python import eventlet from ...

  4. VHDL:信号、端口以及和Verilog的区别

    1.信号 信号是描述硬件系统的基本数据对象,它的性质类似于连接线.信号可以作为设计实 体中并行语句模块间的信息交流通道.      信号作为一种数值容器,不但可以容纳当前值,也可以保持历史值(这决定于 ...

  5. [原创]cocos2d-x研习录-第二阶 概念类之精灵类(CCSprite)

    上一节说布景层CCLayer是小容器,那么精灵类CCSprite就是容器添加的内容,它是构成游戏的主要元素.精灵这个名称应该是游戏专用,它表示游戏中玩家操作的主角.敌人.NPC(Non Player ...

  6. EDIUS中调整YUV曲线的教程

    本篇文章重点地讲解了EDIUS调整YUV曲线的方法,是一篇很详细的EDIUS教程文章,它能帮助新手小伙伴快速掌握EDIUS视频编辑软件的某一知识点.相信坚持学习小编推荐的教程文章,你们会很快入门EDI ...

  7. Unable to create a constant value of type 'Closure type'

    使用Linq to Entities的时候发生如下异常: Unable to create a constant value of type 'Closure type'. Only primitiv ...

  8. c语言字符串操作大全

     C语言字符串操作函数 函数名: strcpy 功  能: 拷贝一个字符串到另一个 用  法: char *stpcpy(char *destin, char *source); 程序例: #incl ...

  9. 21副GIF动图让你了解各种数学概念

    baidu 21副GIF动图让你了解各种数学概念

  10. Code Igniter + PHP5.3 + SqlServer2008配置

    1.配置apache+php5.3 2.配置sql server服务器,并允许远程连接. 3.去http://www.microsoft.com/en-us/download/details.aspx ...