elementNode.setAttribute(name,value)

1.name: 要设置的属性名。

2.value: 要设置的属性值。

elementNode.getAttribute(name)

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)
文本节点：包含在元素节点中。
属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。

nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

elementNode.childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，它具有length属性。如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

node.lastChild

获取指定节点的父节点

elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:

elementNode.parentNode.parentNode

nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）
nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
 previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body><div>

            <span id="span">各类节点</span>

        </div>

        <script type="text/javascript">

            window.onload = function() {

                var element = document.getElementById("span");

                var text = element.firstChild;

                var property = document.getElementById("span").getAttributeNode("id");

                //nodeName

                alert("这是元素节点的返回值：" + element.nodeName); //返回的标签名SPAN,注意是大写的

                alert("这是文本节点的返回值：" + text.nodeName); //返回的#text

                alert("这是属性节点的返回值：" + property.nodeName); //返回的是属性名，这里是id

                //nodeValue

                alert("这是元素节点的返回值："+ element.nodeValue);//本身就没有意义，返回的是null

                alert("这是文本节点的返回值："+ text.nodeValue);//返回的是文本值  各类节点

                alert("这是属性节点的返回值："+ property.nodeValue);//返回的是属性值，这里是id的属性值 span

                //nodeType

                alert("这是元素节点的返回值："+ element.nodeType);//元素节点返回1

                alert("这是文本节点的返回值："+ text.nodeType);//文本节点返回3

                alert("这是属性节点的返回值："+ property.nodeType);//属性节点返回2

            }

        </script>

    </body>

</html>

DOM节点例子的更多相关文章

  1. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  2. JS中级 - 01：DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

  3. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  4. 获取DOM节点的几种方式

    DOM 是一个树形结构,操作一个DOM节点,实际上就是这几个操作:更新.删除.添加.遍历 在操作DOM节点之前,需要通过各种方式先拿到这个DOM节点,常用的方法有: 一.通过元素类型的方法来操作: d ...

  5. 新添加的DOM节点如何实现动画效果

    如何给新添加的DOM节点加动画效果 最近碰到项目中,在DOM节点中,添加新的 html 后 要有动画效果,一直没能很好地理解,尝试了各种方式,终于找出来了 简化版结构 代码如下 使用jq1.9以上版本 ...

  6. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  7. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  8. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  9. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

随机推荐

  1. SAP ABAP 的经常使用debug方式

    SAP ABAP 的经常使用debug方式: 1. 直接在程序中设断点 在se38里面打上breakpoint,程序执行到该处即进入debug模式 2.background Job的debug 进入S ...

  2. HDU - 3584 Cube (三维树状数组 + 区间改动 + 单点求值)

    HDU - 3584 Cube Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Subm ...

  3. python搭建web server

    假设你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比方:Apache,ISS等.那么, Python 可能帮助你.使用Python能够完毕一个简单的内建 HT ...

  4. android application类简单介绍（一）

    每次应用程序执行时.应用程序的application类保持实例化的状态. 通过扩展applicaiton类,能够完毕下面3项工作: 1.对android执行时广播的应用程序级事件如低低内做出响应. 2 ...

  5. 一起talk C栗子吧（第七回：C语言实例--进制转换）

    各位看官们.大家好,从今天開始.我们讲大型章回体科技小说 :C栗子,也就是C语言实例. 闲话休提, 言归正转.让我们一起talk C栗子吧! 看官们.上一回中咱们说的是生成随机数的样例.这一回咱们说的 ...

  6. 仰视源代码，实现strcmp

    //这是系统库的实现 int strcmp(const char* src, const char* dest) { int rtn = 0; while(!(rtn = *(unsigned cha ...

  7. Delphi属性比对象的域有更强的功能

    8.4 Delphi自定义组件(3) http://tech.163.com 2006-04-29 11:49:34 来源: 清华大学出版社 网友评论0 条 论坛   3. 测试未安装的组件 在将新组 ...

  8. YTU 2547: Repairing a Road

    2547: Repairing a Road 时间限制: 1 Sec  内存限制: 128 MB 提交: 3  解决: 2 题目描述 You live in a small town with R b ...

  9. ios下使用overflow scroll情况下，到达最极端的情况时会拖动整个页面的解决办法

    今天开发ipad webapp时,遇到个问题就是在支持内部滚动(overflow:scroll)的页面中,在滚到到最极端(最上或者最下时),会拖动整个页面,带来不好的用户体验. 方法一,从网上找到的: ...

  10. Linux下 CentOS 7 对比6 改动详解 及 系统安装

    系统基础服务变化 操作系统 本文CentOS7 为最新版7.5 本文CentOS6 为6.9 操作 Centos6 Centos7 对比 自动补全 只支持命令.文件名 支持命令.选项.文件名 文件系统 ...