- 浏览: 221233 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
(原创)javascript 实现批量打印《简历》 -
liangchengfck1:
这个只能正对数据量少的批量打印,当你打印10000张数据的时候 ...
(原创)javascript 实现批量打印《简历》 -
dare_:
官网的文档明确说明 是五种 你的默认和no应该是同一种
Spring 中Bean的自动装配六种模式,你懂得几种? -
Franciswmf:
图片上传的东西呢?
java+Ckeditor -
huigou:
地址不对了
ETL Kettle发送邮件时发送失败!高手指点!
DOM 总结(二)
查找元素的方法:
1,getElementByName()方法:
寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
举例:
<form name="form1"> <input type="text" name="tname" value="吃饭_1" /><br> <input type="text" name="tname" value="吃饭_2" /><br> <input type="text" name="tname" value="吃饭_3" /><br> <input type="button" name="ok" value="保存" id="ok" onclick="test();"> </form> function test(){ // 获取属性的Name var tnameArray=document.getElementsByName("tname"); //输出长度 alert(tnameArray.length); //迭代输出获得的值 for(var i=0;i<tnameArray.length;i++){ window.alert(tnameArray[i].value); } }
2,getElementById()方法:
寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素 节点。如果不存在这样的元素,它返回 null.
var oElement = document.getElementById ( sID )
**该方法只能用于 document 对象
举例:
3,通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
<input type="text" value="吃饭" id="tid"> function test(){ //获取ID var usernameElement=document.getElementById(“tid"); //获取元素的值 alert("usernameElement.value: "+usernameElement.value) //获取元素的类型 alert("usernameElement.type: "+usernameElement.type) }
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段:
<table> <tr> <td>John</td> <td>Doe</td> <td>Alaska</td> </tr> </table>
在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。
此外,<tr> 是每个 <td>元 素的父节点(parentNode),这就是DOM父与子之间的关系;但是有的时候有的父节点不存在子节点那么就需要进行判断在读取,在判断是我们用到了一个方法hasChildNodes()方法
hasChildNodes()
该方法用来检查一个元素是否有子节点,返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。
在用元素子节点的属性读取时我们先要获得根节点:
有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问
DOM的属性
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
1,DOM属性nodeName
nodeName 属性含有某个节点的名称。
var name = node.nodeName;
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
注:nodeName 是一个只读属性。
2,DOM属性nodeValue
nodeValue:返回给定节点的当前值(字符串)
如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容。
如果给定节点是一个元素节点,返回值是 null
nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
但可以为文本节点的 nodeValue 属性设置一个值。
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “国庆60年”;
3,DOM属性 nodeType
nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
举例:
如下的html: 请将select中的文本输出(用两种方法来写)
<body> <div> <form action=""> 用户名:<input type="text" name="name" /> 学历:<select id="edu" name="education"> <option value="大专">大专生</option> <option value="本科">本科生</option> <option value="硕士">硕士生</option> <option value="博士">博士生</option> </select> <input type="submit" value="注册" /> </form> </div> 用户的学历是: <div id="showMsg"> </div> </body>
第一种(用getElementById()和getElnmentByNmae()方法读取)
<script type="text/javascript"> window.onload = function() { //通过getElementById("edu")方法获取select的对象 var edus = document.getElementById("edu"); //通过select中options集合获取所有的option对象 var edus1 = edus.options; var msg =""; //遍历所有的option对象的文本值 for(var i=0;i<edus1.length;i++){ msg+=edus1[i].innerHTML+","; } //把获取的msg信息写入到showMsg的div中 document.getElementById("showMsg").innerHTML=msg; } </script>
第二种(通过元素节点的属性来读取)
<script type="text/javascript"> window.onload = function() { //通过getElementById("edu")方法获取select的对象 var edus = document.getElementById("edu"); var edus1 = edus.childNodes; alert(edus1.length); var fc = edus.firstChild; alert(fc.nodeName); var lc = edus.lastChild; alert(lc.nodeName); var llc = lc.firstChild; alert(llc.nodeValue); var msg=""; for(var i=0;i<edus1.length;i++){ if(edus1[i].nodeType==1) msg+=edus1[i].lastChild.nodeValue+","; } document.getElementById("showMsg").innerHTML=msg; } </script>
发表评论
-
项目框架和项目架构的区别是什么?
2012-05-17 12:31 1786项目框架和项目架构的区别是什么?谁能告诉我啊! -
(原创)javascript 实现批量打印《简历》
2012-04-16 15:57 20742(原创)javascript 实现批量打印《简历》 ... -
java+Ckeditor
2012-03-23 18:09 1878CKEditor 二次开发 ---- 为 ... -
iteye 这是咋了
2012-03-23 17:45 11iteye这是咋了 发一篇文章就这么难嘛 越来越他妈的垃圾了 ... -
不查不知道 一查全知道(hibernate注解实现set集合排序)
2011-12-21 16:09 1334@ManyToMany(cascade = { Cascade ... -
《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}
2011-08-24 18:23 42076异常详细信息: System.Runtime.InteropS ... -
JDK7.0语法新特性及下载
2011-08-12 17:28 27761,菱形语法(泛型实例 ... -
系统性能调优总结分享(转载)
2011-07-01 13:33 1511概述 Ø 性能优化的思 ... -
JAVA内存问题:Java heap space
2011-06-29 14:09 1905错误信息: javax.servlet.Servle ... -
Jquery从入门到精通及附件下载(一)
2011-03-30 08:15 3773Jquery从入门到精通及 ... -
Json 浅谈及解析
2011-03-25 17:07 2204Json 浅谈及解析 Json简介 ... -
Ajax 实现分页及表与表的级联
2011-03-24 20:57 1445Ajax 实现分页及表与表的级联 时间过的真快转 ... -
《神》预测本周五 java 考试题!!
2011-03-22 19:56 1208预测本周五 java 考试题!! 1,加载类有哪几 ... -
DOM总结(三)及综合案例
2011-03-17 20:59 1042DOM总结(三)及综合案例 1,DOM属性-----re ... -
DOM 总结(一)
2011-03-16 20:24 1417DOM 总结(一) ... -
javascript实现全选,反选及全不选
2011-03-15 19:53 1362javascript实现全选,反选及全部选 html 代 ... -
仿谷歌,百度分页计算分析 代码实现
2011-03-10 19:32 1960仿谷歌,百度分页计 ... -
Java反射概念及类的反射的实例应用
2011-03-04 10:32 2303Java反射概念及类的反射的实例 一、反射的概念 : ... -
BeanUtils工具包下载及应用
2011-03-04 10:23 18648BeanUtils工具包下载及应用 ... -
“世界上最复杂的邮件”诞生了
2011-03-04 08:04 1271“世界上最复杂的邮件” ...
相关推荐
而对DOM的主要也就是围绕元素节点和属性节点的增删改查。下面就分别从对元素节点的操作和对属性节点的操作来介绍。 元素节点 查 在对DOM进行增删改之前,首先要找到对应的元素。具体的查找方法如下: ...
DOM0级事件绑定:只能给一个元素的某一个行为绑定一次方法,第二次绑定的会把前面的覆盖掉。 DOM2:可以给某一个元素的同一个行为绑定多个不同的方法 box.addEventListener('click',function(e){ console.log(1) }...
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找,最多找一个;...二.获取内容 非表单元素:alert(a[removed]);获取代码和内容,但只显示内容。 alert
仓库,文章内容按照一位老师视频学习而来(详情见文本末尾哈),每一个字都是自己手动敲出来的,算是给自己的一个梳理和总结,下面,我们一起来学习一下 dom diff 吧。 DOM Diff dom diff 其实就是对比两个虚拟节点...
二、创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("Hello World."); var pEl =...
(1、*setInterval每隔一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。如: setInterval(“alert(‘hello’)”,5000); *clearInterval...
使用jQuery的方式来操作DOM更加的简洁、方便,统一的调用方式方便学习并且可降低学习成本。 1、样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性...
二.前言 3 三.什么是jQuery 3 四.Hello World jQuery 4 五.启用Visual Studio 对jQuery的智能感知 6 六.在独立的.JS文件中启用脚本智能感知 8 七.总结 9 从零开始学习jQuery (二) 万能的选择器 9 一.摘要 9 二.前言 ...
本文实例讲述了js DOM的事件常见操作。...二、事件 JS是以事件驱动为核心的一门语言。 事件的三要素 事件的三要素:事件源、事件、事件驱动程序 总结如下: 事件源:引发后续事件的html标签。 事件:
第一章:编程基础 3-11 第二章:数组 11 -31 第三章:面向对象程序开发 31 -74 第四章:异常机制 74 -89 第五章:多线程技术 89 -122122122 第六章:常用类 API 122API 122 API 122API 122API 122...第十六章:DOM 375
第二个参数是插入HTML片断,第三个参数是决定是否返回一个Ext.Element类型的DOM对象。 Ext.fly('elId').insertHtml( 'beforeBegin', '<p><a href="anotherpage.html'>点击我</a></p>' ); // 返回dom节点 Ext....
第二部分 JavaScript核心 第4章 语言结构 4.1 JavaScript的基本文法 4.2 常量和变量 4.3 表达式和运算符符 4.4 控制语句 句 4.5 总结 第5章 数据类型 5.1 基本数据类型 5.2 数组和...
泛微OA前端开发接口方法和自定义方方法总结注释 适用于刚接触泛微OA前端开发的小白和不了解泛微OA开发的老手 有什么问题可以私信问我 前端代码开发方式 方式1:模板上代码块,针对单个节点,在显示/打印/移动模板...
第二十二章:使用Java解析XML 397 学习目标 397 解析器的介绍 398 DOM以及广义的基于树的处理具有几个优点 399 文档对象模型(DOM)解析实例 402 DOM对象 404 DOM解析的例子: 406 SAX解析实例 409 DOM4J解析实例 ...
目录 一,JS对象二,DOM–1,作用–2,测试三,Jquery–1,概述–2,使用步骤–3,入门案例–4,jQuery的文档就绪四,JQuery的语法–1,选择器–2,常用函数–3,常用事件–4,练习总结 一,JS对象 二,DOM –1,...
二.WebKit DOM代码解析流程 57 VII.WebKit之布局分析 57 一.基本概念 57 1.CSS布局相关标准介绍 58 2.布局页面的基本概念 58 3.如何确定页面元素显示位置 60 4.如何确定页面元素大小 61 5.如何理解z-index的使用 61 ...
本文主要介绍了JQuery的基本知识,如:JQuery的dom操作,动态创建dom节点,删除节点,document方法等等,文章篇尾处附上实例小练习。需要的朋友可以参考下
BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。 二、学习BOM学什么 我们将学到与浏览器窗口交互的一些对象,例如可以移动、调整浏览器大小的...
抽象包括两个方面,一是过程抽象,二是数据抽象。 2.继承: 继承是一种联结类的层次模型,并且允许和鼓励类的重用,它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生,这个过程称为类继承。新类...