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. 异 形 卵 709 南阳oj

    http://acm.nyist.net/JudgeOnline/problem.php? pid=709 异 形 卵 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 ...

  2. AutoCAD如何方便截图放到Word文档，改成白底黑字

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

  3. Markdown 语法的简要规则

    标题 标题是每篇文章都须要也是最经常使用的格式,在 Markdown 中.假设一段文字被定义为标题,仅仅要在这段文字前加 # 号就可以. # 一级标题 ## 二级标题 ### 三级标题 以此类推,总共 ...

  4. Java算法-奇怪的分式

    题目: 上小学的时候,小明常常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明竟然把分子拼接在一起,分母拼接在一起,答案是:18/45 老师刚想批评他.转念一想.这个答案凑巧也对啊, ...

  5. A星算法（Java实现）

    一.适用场景 在一张地图中.绘制从起点移动到终点的最优路径,地图中会有障碍物.必须绕开障碍物. 二.算法思路 1. 回溯法得到路径 (假设有路径)採用"结点与结点的父节点"的关系从 ...

  6. 免安装版TOMCAT配置及问题解决方法

    前言 本文将介绍下面几点内容: 1.Tomcat的配置过程 2.启动startup过程中遇到的问题的解决 3.假设遇到本文中没有提到的问题怎样解决 配置 计算机右击->属性->高级系统设置 ...

  7. [办公应用]如何设置IE打印时的默认页边距，并设置纸张为横向（会计票据打印）

    最近一个做会计的同事询问,如何将IE打印时的默认页边距更改,并且每次都要是横向的纸张. 这是因为她已经测试好纸张的大小,并据此调整好了页边距.可惜的是下一次打印时,又要重新调整一遍. 经过研究,方法如 ...

  8. ssh服务常见问题及其解决办法

    1 统一解决办法 执行sshd -t,这样就可以指出是哪里出问题了. 所有的服务都应该有这个测试选项,否则出错了都不知道在哪里出的问题. 2 root用户登录,密码是对的,但是报“Permission ...

  9. 【推荐】微服务分布式企业框架Springmvc+mybatis+shiro+Dubbo+ZooKeeper+Redis

              摘要: 主要定位于互联网企业架构,已内置企业信息化系统的基础功能和高效的代码生成工具,包括:系统权限组件.数据权限组件.数据字典组件.核心工具 组件.视图操作组件.工作流组件.代码 ...

  10. luogu 3958 奶酪

    noip2017 D2T1 奶酪 某zz选手没有想到可以用并查集来做,直接用了dijskstra,结果被ccf老爷机卡成了70分 题目大意: 现有一块大奶酪,它的高度为 h,它的长度和宽度我们可以认为 ...