DOM中的节点属性

  我们在做web测试时,适当了解前端的知识有助于我们测试工作中bug的定位,同时也有助于自动化测试中的元素定位。下面我简单写一下关于JavaScript中的DOM的节点元素。

  DOM ,文件对象模型,主要是针对HTML 和XML文档中的一个api(应用程序接口)。DOM定义了访问和处理HTML文档的标准方法,描绘了一个层次化的节点树。DOM将HTML文档呈现出元素、属性和文本的树形结构。

  在DOM中,每一个节点都是一个对象。DOM节点都有三个重要的属性:

  1. nodeName : 节点的名称

  2. nodeValue :节点的值

  3. nodeType :节点的类型

一、nodeName 属性: 节点的名称,是只读的。

  1. 元素节点的 nodeName 与标签名相同

  2. 属性节点的 nodeName 是属性的名称

  3. 文本节点的 nodeName 永远是 #text

  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null

  2. 文本节点的 nodeValue 是文本自身

  3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型,是只读的。

  以下常用的几种结点类型:

  元素类型    节点类型

   元素            1

  属性            2

  文本            3

   注释            8

  文档            9

例子:获取所有li标签,并输出相应节点的名称、节点的值和节点的类型 :

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>节点属性</title>
 6 </head>
 7 <body>
 8   <ul>
 9      <li>javascript</li>
10      <li>HTML/CSS</li>
11      <li>jQuery</li>
12   </ul>
13   <script type="text/javascript">
14      var li=document.getElementsByTagName("li");
15      for(var i=0;i<li.length;i++){
16          document.write("节点名称:"+li[i].nodeName+" 节点属性:"+li[i].nodeValue+"节点类型:"+li[i].nodeType+"<br/>");
17          }
18   </script>
19 </body>
20 </html>  

原文地址:https://www.cnblogs.com/starstarstar/p/8875565.html

时间: 2024-10-12 23:49:26

DOM中的节点属性的相关文章

DOM中元素节点、属性节点、文本节点的理解13.3

节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素(ELEMENT_NODE) 1 属性(ATTRIBUTE_NODE) 2 文本(TEXT_NODE) 3 注释(COMMENT_NODE) 8 文档(DOCUMENT_NODE) 9 在实际应用中,经常用到的就是元素节点.属性节点和文本

javascript DOM中的节点层次和节点类型概述

针对JS高级程序设计这本书,主要是理解概念,大部分内容源自书内.写这个主要是当个书中的笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的代码. 另外这篇不包括DOM2,DOM3的内容 DOM 文档对象模型,针对HTML和XML文档的一个API.描绘了一个层次化的结点树,循序开发人员添加,移除修改页面上的一部分. 1节点层次 DOM把文档描绘成一个由多层节点构成的结构.节点有不同的类型.节点之间的关系构成了层次. 文档节点是每个

js中对节点属性的操作和对节点的操作

常用的节点属性操作方法 1.setAttribute(name,value):给某个节点添加一个属性 2.getAttribute(name):获取某个节点属性的值. 3.removeAttribute(name):删除某个节点的属性. 例: window.onload = function(){        //查找body节点        var node_body = document.body;        //alert(node_body);        //查找img节点 

DOM中元素节点、属性节点、文本节点

DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是3. 元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text 对于文本节点,nodeValue 属性包含文本. 对于属性节点,nodeValue 属性包含属性值. nodeValue 属性对于文档节点和元素节点是不可用的. n

js学习总结----DOM中的节点和关系属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <h1>培训课程</h1> <ul> <li>html+css&

DOM中元素节点、属性节点、文本节点的理解

转自:http://www.cnblogs.com/dh616854836/archive/2011/08/14/2138038.html 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文

DOM中元素节点,属性节点,文本节点的理解

节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文本节点了,下面我们通过小段代码进行讲解 1:元素节点 <HEAD> <TITLE>空谷悠悠</TITLE> <

dom中一些节点获取和增改

1获取标签里的文本对象: 对象.innerText 获取标签里的文本内容     早期的火狐浏览器中是不支持的 赋值会输出转义后的内容 对象.innerHTML 获取标签里的所有内容 赋值会输出原样 都兼容 对象.textContent 获取标签里的文本内容   IE8之前包括ie8不支持  2 自定义属性 自定义属性 js无法通过点的方式获得 对象.getAttribute("属性名")  得到自定义属性对象 对象.setAttribute("属性名",”属性值“

DOM中文本节点索引方法

问题 对于 jquery 接口text()只能取到有标签的 dom对象中 文本内容. 如果索引对象本身就是文本节点,则不好索引到, 没有相关的索引选择器. 例如: 对于<input>aaa 形式的代码, $("input").next().text(), 则不能返回 aaa. 下面有讨论使用jquery索引的方法, 目标是在某个标签下, 找到所有 text node的 对象: http://stackoverflow.com/questions/298750/how-do-