- 浏览: 221191 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
July01:
最近了解到一款StratoIO打印控件,功能如下:1、Html ...
(原创)javascript 实现批量打印《简历》 -
liangchengfck1:
这个只能正对数据量少的批量打印,当你打印10000张数据的时候 ...
(原创)javascript 实现批量打印《简历》 -
dare_:
官网的文档明确说明 是五种 你的默认和no应该是同一种
Spring 中Bean的自动装配六种模式,你懂得几种? -
Franciswmf:
图片上传的东西呢?
java+Ckeditor -
huigou:
地址不对了
ETL Kettle发送邮件时发送失败!高手指点!
DOM总结(三)及综合案例
1,DOM属性-----replaceChild()
replaceChild()---替换节点:
把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中
练习:
问题:当单击”北京”这个节点时,北京这个节点被”游泳”替换
Html代码:
<body> 个人所在城市: <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="tj">天津</li> <li id="dd">大都</li> </ul> 个人爱好: <ul id="fav"> <li id="yy">游泳</li> <li id="pp">乒乓球</li> <li id="ymq">羽毛球</li> <li id="lq">篮球</li> </ul> </body>
js解答:
window.onload = function(){ //通过id获得节点 var bj = document.getElementById("bj"); //定义隐函数 bj.onclick = function(){ / var yy = document.getElementById("yy"); //通过replaceChild()方法来进行替换 bj.parentNode.replaceChild(yy,bj); } }
2,查找属性节点
getAttribute()
返回一个给定元素的一个给定属性节点的值
var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute() 将返回一个
空字符串.
通过属性获取属性节点。
getAttributeNode(属性的名称)--Node
如:<li name="beijing" id="bj">北京</li> 获取属性值和文体
//通过属性名获取属性的值
var bjElement=document.getElementById("bj");
var attributeValue=eduElement.getAttribute("name");
alert("attributeValue "+attributeValue);
//通过属性名获取属性的节点
var bjNode=eduElement.getAttributeNode("name");
alert(eduNode.nodeValue);
alert(eduNode.nodeType);
alert(eduNode.nodeName);
3,设置属性节点
SetAttribute()
将给定元素节点添加一个新的属性值或改变它的现有属性的值。
element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在,它的值将被刷新;
如果不存在,setAttribute()方法将先创建它再为其赋值。
如:<li id="bj" >北京</li> //获取元素的引用 var bjElement=document.getElementById("bj"); //设置属性值 bjElement.setAttribute("name","beijing"); //获取设置的属性值 var nameValue=bjElement.getAttribute("name"); alert("nameValue "+nameValue);
4,创建新文本节点
createTextNode()
创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节
点引用指针。
var textNode = document.createTextNode(text);
方法只有一个参数:新建文本节点所包含的文本字符串
方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的
nodeType 属性等于 3.
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性
如:
var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);
5,插入节点
5.1
appendChild()
为给定元素增加一个子节点:
var newreference = element.appendChild(newChild).
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素
5.2
insertBefore()
把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用
5.3
insertAfter() 方法(但是DOM没提供方此方法)*
可以通过DOM的属性方法来写一个:
function insertAfter(newElement,targetElement){
//获取目标元素的父节点
var parentElement=targetElement.parentNode;
//如果目标元素是最后一个元素,则新元素插入到目标元素的后面
if(parentElement.lastChild==targetElement){
parentElement.appendChild(newElement);
}else{//如果目标元素不是最后一个元素,则新元素插入到目标元素的的
//下一个兄弟节点的前面,即目标元素的后面
parentElement.insertBefore(newElement,targetElement.nextSibling);
}
}
6,删除节点
removeChild()
从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
7,获取最后一个子节点
lastChild:对应 firstChild 的一个属性。
nextSibling: 返回一个给定节点的下一个兄弟节点。
parentNode:返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点,因为只有元素节点才有可能包含子节点。
Document 节点的没有父节点。
previousSibling:返回一个给定节点的上一个兄弟节点
8,innerHTML属性
浏览器几乎都支持该属性,但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读,写某给定元素里的 HTML 内容。
综合案例
实现如图js的增删该
结束语:如何实现 ,请继续关注我的博客》
发表评论
-
项目框架和项目架构的区别是什么?
2012-05-17 12:31 1783项目框架和项目架构的区别是什么?谁能告诉我啊! -
(原创)javascript 实现批量打印《简历》
2012-04-16 15:57 20738(原创)javascript 实现批量打印《简历》 ... -
java+Ckeditor
2012-03-23 18:09 1876CKEditor 二次开发 ---- 为 ... -
iteye 这是咋了
2012-03-23 17:45 11iteye这是咋了 发一篇文章就这么难嘛 越来越他妈的垃圾了 ... -
不查不知道 一查全知道(hibernate注解实现set集合排序)
2011-12-21 16:09 1332@ManyToMany(cascade = { Cascade ... -
《终于解决了》检索 COM 类工厂中 CLSID 为 {0002E510-0000-0000-C000-000000000046}
2011-08-24 18:23 42074异常详细信息: System.Runtime.InteropS ... -
JDK7.0语法新特性及下载
2011-08-12 17:28 27751,菱形语法(泛型实例 ... -
系统性能调优总结分享(转载)
2011-07-01 13:33 1510概述 Ø 性能优化的思 ... -
JAVA内存问题:Java heap space
2011-06-29 14:09 1903错误信息: javax.servlet.Servle ... -
Jquery从入门到精通及附件下载(一)
2011-03-30 08:15 3773Jquery从入门到精通及 ... -
Json 浅谈及解析
2011-03-25 17:07 2203Json 浅谈及解析 Json简介 ... -
Ajax 实现分页及表与表的级联
2011-03-24 20:57 1443Ajax 实现分页及表与表的级联 时间过的真快转 ... -
《神》预测本周五 java 考试题!!
2011-03-22 19:56 1207预测本周五 java 考试题!! 1,加载类有哪几 ... -
DOM 总结(二)
2011-03-16 20:30 1265DOM 总结(二) 查找元素的方法: 1 ... -
DOM 总结(一)
2011-03-16 20:24 1416DOM 总结(一) ... -
javascript实现全选,反选及全不选
2011-03-15 19:53 1360javascript实现全选,反选及全部选 html 代 ... -
仿谷歌,百度分页计算分析 代码实现
2011-03-10 19:32 1957仿谷歌,百度分页计 ... -
Java反射概念及类的反射的实例应用
2011-03-04 10:32 2302Java反射概念及类的反射的实例 一、反射的概念 : ... -
BeanUtils工具包下载及应用
2011-03-04 10:23 18647BeanUtils工具包下载及应用 ... -
“世界上最复杂的邮件”诞生了
2011-03-04 08:04 1271“世界上最复杂的邮件” ...
相关推荐
DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...
Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例,希望对大家有所帮助
asp.net网络编程必备js和dom用法案例
DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM ...
使用dom4j将xml文件进行解析,输入指定节点并生成List, 输入指定节点将属性和text以key--value的形式存入map
dom学习总结
史上最详细的DOM笔记,最全DOM操作详解。
Javascript DOM 总结 Javascript DOM 总结 Javascript DOM 总结
一个使用dom4j-1.6.1.jar和jaxen-1.1-beta-6.jar的案例 dom4j测试!! ***********账号信息列表*********** 账号:zhang 密码:123456 账号:lisi 密码:123 增加一组信息 ***********账号信息列表*********** ...
javascript 常用DomAPI总结
对于xml&dom&sax&dom4j 文件解析的代码总结
JavaScript语言教学中DOM综合性应用案例的教学设计.pdf
对于DOM的一些总结,DHTML,BOM,DOM对象里的一些属性和方法
JavaScript_——DOM总结.txt
Javascript DOM 总结
根据JavaScript DOM 编程艺术这本书之前所介绍的内容,做的本书最后的一个综合简单示例
JavaScript获取HTMLDOM节点元素的方法的总结
自己学习XML解析的时候写的、核心内容。
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...
DOM事件总结(教辅).pdf