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. AutoCAD如何方便截图放到Word文档，改成白底黑字

    将模型视图切换到布局2即可   比如下图所示的效果   先回到模型视图把所有线条颜色都改成白色,然后添加适当的标注(比如要受力分析,则在CAD中绘制箭头也很方便的),文字说明.然后切换到布局2就OK ...

  2. 【智能路由器】让MT7620固件openwrt支持USB

    [智能路由器]系列文章连接 http://blog.csdn.net/u012819339/article/category/5803489 首先确定硬件有USB,这个得检查板子是否引出了usb口,一 ...

  3. Tomcat 隐藏Server Name

    隐藏Http请求中的Header ServerName 方法一 在tomcat/lib/tomcat-coyote.jar中 下面两个文件 org/apache/coyote/http11/Const ...

  4. ps图片怎样实现渐变

    首先我先将一副图片展示给大家: 我所做的效果是想把图片做成渐变.而不改变中间图片的颜色效果. 接下来我来说明一下我的所做思路. 首先将图片中间部分选择出来.然后复制成一个图层. 详细操作是用魔棒进行反 ...

  5. iOS中.pch文件怎样使用

    pch 能够用来存储共享信息,比方设备屏幕的宽度,高度.版本等等 公用信息 Xcode 老版本号会自己主动为我们创建pch文件,新版本号開始不自己主动创建了.假设须要使用能够自己手动创建 waterm ...

  6. 【OI】对拍

    对拍的方法是先用生成器生成几组随机数据,然后用暴力算法和当前算法对比结果来确保正确性. 数据生成器: 引入cstdlib与ctime两个库,然后通过srand初始化随机数: srand(time(0) ...

  7. YTU 2899: D-险恶逃生 I

    2899: D-险恶逃生 I 时间限制: 1 Sec  内存限制: 128 MB 提交: 130  解决: 55 题目描述 Koha被邪恶的巫师困在一个m*n的矩阵当中,他被放在了矩阵的最左上角坐标( ...

  8. Killer Problem(暴力)

    题意: 给定一个序列,每次询问l到r之间两个数差的绝对值的最小值. 分析: 开始以为是线段树离线处理,实际暴力就好! #include <map> #include <set> ...

  9. 【Codevs3151】交通管制I

    Position: http://codevs.cn/problem/3151/ List [Codevs3151]交通管制I List Description Input Output Sample ...

  10. 转 Dos和linux格式转换(转)

    错误提示: bad interpreter: No such file or directory: /bin/sh 错误分析: 因为操作系统是windows,在windows下编辑的脚本,所以有可能有 ...