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. Python循环定时服务功能（相似contrab）

    Python实现的循环定时服务功能.类似于Linux下的contrab功能.主要通过定时器实现. 注:Python中的threading.timer是基于线程实现的.每次定时事件产生时.回调完响应函数 ...

  2. HDU 5402 Travelling Salesman Problem (构造)（好题）

    大致题意:n*m的非负数矩阵,从(1,1) 仅仅能向四面走,一直走到(n,m)为终点.路径的权就是数的和.输出一条权值最大的路径方案 思路:因为这是非负数,要是有负数就是神题了,要是n,m中有一个是奇 ...

  3. easyui中点击datagrid的分页刷新按钮，数据无法更新到最新状态

    原因分析:点击刷新按钮是对当前页数据进行reload,因此所传的请求参数皆为上一次加载当前页的参数即datagrid的load方法中的参数,主要是因为请求的最终时间无法更新到最新状态 解决方案:对点击 ...

  4. 2011:Audio Classification (Train/Test) Tasks - MIREX Wiki

    Contents [hide] 1 Audio Classification (Test/Train) tasks 1.1 Description 1.1.1 Task specific mailin ...

  5. cocos2dx 纹理优化

    description: 为什么要谈纹理的问题,游戏的画面无时无刻不充斥着图像,通俗意义上一款精致的游戏都有着非常精美的画面.这样往往能给玩家带来更好的游戏体验,这一点也是对于游戏制作者来说所尽力追求 ...

  6. COCOS学习笔记--即时动作ActionInstant

    Cocos引擎中的动作类的关系图例如以下: 能够看出,Action是继承自Ref类的,之前我的博客中也有讲过,Ref类是cocos2dx全部类的基类.动作类(Action)是全部动作的基类.它通过cr ...

  7. CF#315 C

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...

  8. easyUI 动态添加窗体

    有一张页面A,在页面开头引用了jquery.easyUI.min.js. 现在想达到这么一种效果,点击页面A的一个按钮,弹出一个easyUI窗体.因为想分模块的原因,这个窗体对应的是另一张页面B.在点 ...

  9. JS 通过选择百度地图地址获取经纬度自动填充到文本框中的方法

    首先要注册百度地图API. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用. 应用类型选择:“浏览器端”, ...

  10. YTU 2630: E2 驾驭const

    2630: E2 驾驭const 时间限制: 1 Sec  内存限制: 128 MB 提交: 673  解决: 491 题目描述 引入了const关键词,用于指定"常"对象及&qu ...