DOM笔记（二）：Node接口

最新推荐文章于 2019-01-23 22:09:21 发布
最新推荐文章于 2019-01-23 22:09:21 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： HTML DOM笔记 文章标签： html dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011043843/article/details/41819671
版权
所有的节点都使用Node接口来表示，可以使用很多方法去获取节点，如document.getElementsByTagName()、document.getElementsByName()等均返回一个NodeList对象，然后获取其中的节点。

     节点对应的属性和放大均在Node接口予以定义：

      1、Node接口常见的属性列表

属性名数据类型说明
nodeNameDOMString返回节点名
nodeValueDOMString返回节点值
nodeTypeint返回节点类型（见后文）
parentNodeNode返回当前节点的父节点
childNodesNodeList返回当前节点的所有子节点
firstChildNode返回当前节点的第一个子节点
lastChildNode返回当前节点的最后一个子节点
previousSiblingNode返回当前节点的紧邻的前一个兄弟节点
nextSiblingNode返回当前节点的紧邻的后一个兄弟节点
attributesNamedNodeMap返回当前节点的所有属性
ownerDocumentDocument返回当前节点对应的Document对象
namespaceURIDOMString返回当前节点所属命名空间的URI
prefixDOMString返回当前节点所属命名空间的前缀
localNameDOMString返回当前节点限定名的本地部分

 

     2、Node接口常见的方法列表

方法名数据类型说明
appendChildNode在末尾添加一个子节点
cloneNodeNode克隆一个子节点
hasAttributesBoolean判断该节点是否有属性
hasChildNodesBoolean判断该节点是否有子节点
insertBeforeNode在指定节点插入一个节点
isSupportedBoolean判断节点特定是否被支持
normalizeVoid规格化节点
removeChildNode删除一个子节点
replaceChildNode替换一个子节点

 

    3、Node类型

          在DOM文档中，每一个节点都属于一种类型，可以使用Node.nodeType属性获取节点的类型。DOM规范规定了12种节点类型，可以使用Node接口定义的常量表示，也可以用数字表示。

节点类型常量数值表示说明
ELEMENT_NODE1元素节点
ATTRIBUTE_NODE2属性节点
TEXT_NODE3文本节点
CDATA_SECTION_NODE4CDATA节点
ENTITY_REFERENCE_NODE5实体引用节点
ENTITY_NODE6实体节点
PROCESSING_INSTRUCTION_NODE7处理指令节点
COMMENT_NODE8注释节点
DOCUMENT_NODE9文档节点
DOCUMENT_TYPE_NODE10文档类型节点
DOCUMENT_FRAGMENT_NODE11文档片段节点
NOTATION_NODE12符号节点

 

     PS：IE不支持常量表示，最好用数字表示。最常用的六种Node类型：1,2,3,8,9,11

    原文首发：http://www.ido321.com/1318.html

    下一篇：DOM笔记（三）：Element接口和HTMLElement接口

会飞的Pikachu
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas入门（3）:图像处理和绘制文字
淡忘~浅思
10-14 4215
9个JQuery和5个JavaScript经典面试题
HTML 5：绘制旋转的太极图
淡忘~浅思
12-07 3564
HTML： <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>Canvas绘制旋转太极</title> </head> <body> <canvas id="face" width="200" height="200"></canvas> </body> </html> JavaScript: var canvas = document.getElementById("face"); var cxt = ca
理解Node类型——不应被忽视的 nodeType、nodeName、nodeValue
热门推荐
zwkkkk1的博客
05-07 1万+
Node 类型   DOM1级定义了 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在 JavaScript 中是作为 Node 类型实现的；除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。   这篇讲讲 Node 类型常会被忽视的三个属性...
Nodejs开发之接口
heiantianshi1的专栏
05-05 1万+
虽然js本身是面向对象语言，但是对于接口的支持并不严格，目前有很多种模拟的实现方式。具体可参考文章：http://jscriptpatterns.blogspot.com/2013/01/javascript-interfaces.html 本文提供的时另外一种思路，接口实现中的主要的两个问题是，无法保证接口实现者正确完整的实现定义的接口和影响运行效率，本文的思路是将接口实现检察放到单元测试中，
js DOM Node 接口
wyw223的博客
01-23 300
所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础 属性 1.Node.prototype.nodeType 　nodeType属性返回一个整数值，表示节点的类型 document.nodeType // 9 文档节点（document）：9，对应常量 Node.DOCUMENT_NODE 元素节点（element）：1，对应常量 Node.ELE...
Java selenium - 父子、兄弟、相邻节点定位方式详解
树洞
03-18 8419
说明 所有的细节全部已经验证通过，Python可参考此篇文章《Python selenium —— 父子、兄弟、相邻节点定位方式详解》 另外，贴出来的代码全部取至于PPmoney官网。^_^ 小小滴广告一波啦。 若有任何异议或者建议，望不吝指教。 由弟弟节点定位哥哥节点 id动态 咱们先看一下html代码 1. 咱们需要定位在button x 2. button x节点下的 系...
JavaScript高级程序设计 DOM学习笔记
12-10
3) Node类型： ①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。 □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE(3); □ Node.CDATA_SECTION_NODE(4); □ Node.ENTITY_RE
node-jquery-xhr:笔记
06-20
如何使用假设您使用 npm，将“node-jquery-xhr”添加到 package.js 的依赖项部分 require("node-jquery-xhr")你可以这样访问 window.documentbody = $("body")还有$.ajax 。 $.ajax({ method: 'get', url: '...
JavaScript 学习笔记（十二） dom
12-09
Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement(“p”)...
读JavaScript DOM编程艺术笔记
01-21
1.获得当前元素的下一个元素 代码如下: function getNextElement(node){ if(node.nodeType==1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }; 2.外部引入的js...
前端笔记：js基础语法，DOM操作，BOM操作
07-09
此外，我还会在此博客账号上持续更新前端相关内容（js基础语法，BOM操作，DOM操作），与此同时会持续优化更新笔记内容，后边也会更新一些后端内容，欢迎您的关注和支持，也欢迎各位小伙伴来讨论js和node.js相关知识...
问题：关于贴友的一个书本页面简单布局（html+css）的实现
淡忘~浅思
09-08 3850
贴友需求：以html+css仿照书本的页面实现布局效果（见图） html代码： 1: <!-- 我的博客：http://www.ido321.com --> 2: <!DOCTYPE HTML> 3: <html> 4: <head> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <title>Test</title>
DOM笔记（三）：Element接口和HTMLElement接口
淡忘~浅思
12-10 3391
一、Element接口 Element接口表示一个元素，该接口扩展自Node接口，自然继承了Node接口的属性和方法，也有一套针对元素的属性和方法。 Element接口常见的属性比较少，常用的就是一个只读的tagName属性，该属性返回元素名，数据类型是DOMString。 Element接口定义的方法也主要是针对属性操作，常见方法如下： 方法名 数据类型 说明 getAttribute DOMString 返回对应属性 getAttributeNode Attr 返回对
Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
淡忘~浅思
10-12 2945
来源：http://www.ido321.com/968.html 一、Canvas的基础知识 Canvas是HTML 5中新增的元素，专门用于绘制图形。canvas元素就相当于一块“画布”，一块无色的透明区域，需要利用JavaScript编写在其中进行绘画的脚本。 在页面放置canvas元素很简单，利用<canvas>标签，同时指定几个基本的属性：id,width和height。接下来通过几个小案例，跟我入门canvas吧~~~^_^~~~ 二、Canvas小案例（测试结果来自Google最新版本
Jquery+bootstrap实现静态博客主题
淡忘~浅思
08-23 2940
Jquery+bootstrap实现静态博客主题 来源：个人博客 下载链接： Fork Git: https://github.com/dwqs/theme1 CSDN: http://download.csdn.net/detail/u011043843/7806307 百度云：http://pan.baidu.com/s/1kThzlS7
仿照某商城首页的源代码及效果
淡忘~浅思
09-26 2540
导航的js,用了一种比较笨的方法 1: $("#ananshi").hover( 2: function(){ 3: $(this).parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"}); 4: /*$('#nanshi').show();*/ 5: $('#nanshi').show(); 6: $('#nvshi').hide
HTML中文本框的区别
淡忘~浅思
05-11 2514
在HTML中，有两种方式来表现文本框：一种是使用元素的单行文本框，另一种是使用《
如何给超链接设置宽度和高度
淡忘~浅思
09-23 2485
3、对a设置padding 1: <!DOCTYPE html> 2: <html> 3: <head> 4: <meta charset="utf-8" /> 5: <title>a设置宽度和高度</title> 6: <style> 7: .abc a{ 8: padding:10px 20px; 9: width:150px; 10: height:50px; 11: border:1p
Invalid DOM node
最新发布
11-12
Invalid DOM node通常是由于在操作DOM节点时，节点不存在或者已经被删除而导致的错误。这种错误通常会在JavaScript中出现，特别是在使用原生JavaScript或者一些框架时。以下是一些可能导致Invalid DOM node错误的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值