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. 百度编辑器拦截上传图片提交上传腾讯server并返回腾讯url

    微信图文编辑时图片必须为上传到腾讯server的url,外连接所有屏蔽,则须要改动百度编辑器的源代码,源代码详细处理地方例如以下图.类为BinaryUploader.java InputStream ...

  2. 【智能家居篇】wifi网络结构（下）

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢. 因为WIFI网络具有移动性,同一时候WIFI以无线电波作为传输媒介,这样的媒介本质上是开放的,且easy被拦截,不论 ...

  3. 另类创业招聘（REV＃2）

    项目一 项目名:苏格拉底网 项目性质:人才測评为主.辅助以简易人才招聘功能的小众功能站点.项目使用了自主研发的人才測评算法以及人格分类模型(与MBTI非常相似). 项目相关网址:sugeladi.ne ...

  4. javascript下的json 序列化及反序列化

    1.序列化 将json对象转为字符串: JSON.stringify(jsonObj) 2.反序列化 var jsonObj = eval("(" + jsonstring + & ...

  5. Yaf的性能

    http://www.laruence.com/manual/yaf.bench.html 之前团队代码在ip的根下 http://192.168.6.212:83/js/common.js ; cd ...

  6. ‘CONFIG_ENV_SIZE’未声明(不在函数内【转】

    本文转载自: http://bbs.csdn.net/topics/390678466 见论坛讨论.可以临时修复.

  7. 洛谷 P2312 & bzoj 3751 解方程 —— 取模

    题目:https://www.luogu.org/problemnew/show/P2312 https://www.lydsy.com/JudgeOnline/problem.php?id=3751 ...

  8. bzoj2957 楼房重建——线段树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2957 线段树维护两个值:cnt 能看到的最多楼房数: mx 最大斜率数: 对于一段区间,从左 ...

  9. LED全彩显示屏色度空间

    摘要:LED全彩显示屏.LED电子大屏幕如果要有一个良好的视觉效果,其中色度占有一席重要的位置,那么该如何让LED显示屏的色度更均匀.合理呢,下面为大家总结出以下几点,供大家参考. LED全彩显示屏. ...

  10. Java 泛型 一

    泛型在Java中有很重要的地位,网上很多文章罗列各种理论,不便于理解,本篇将立足于代码介绍.总结了关于泛型的知识. 先看下面的代码: List list = new ArrayList(); list ...