javascript dom 操作详解 js加强


Posted in Javascript onJuly 13, 2009

1 、文档里的每个节点都有属性 nodeName 、 nodeValue 、 nodeType
nodeName 文本节点的的节点名是 #text , nodeName 是只读属性
nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性
nodeType 不能用于元素节点 返回 null
2 、 getElementsByTagName 返回一个节点集合
3 、 firstChild 、 lastChild 第一个元素节点,最后一个元素节点
4 、 childNodes 返回所有子节点列表
5 、 previousSibling 前一个兄弟节点 nextSibling 后一个兄弟节点 parentNode 返回父节点
6 、 hasChildNodes 文本节点可以作为元素节点的子节点,文本节点和属性节点不可能再包含任何子节点
7 、 appendChild(node) 追加节点
8 、 removeChild() 移除一个节点
可以借用子节点的得到父节点,然后移除子节点。
9 、 replaceChild() 替换方法,有两个参数,把第一个参数的内容替换掉第二个参数的内容
如果两个都存在在 dom 中,第一个会出现在第二个的位置,而第二个将消失。
10 、 insertBefore(newnode,refnode) 在 refnode 之前插入 newnode
11 、创建节点
setAttribute() 为一个元素节点增加属性
createElement() 创建一个元素节点
createTextNode() 创建一个文本节点
用这三个方法可以添加任何节点。
12 、 innerHTML 内部的 html 既可以得到,也可以设置
这里有一个例子,联动选择地市,地市信息在 xml 中
13 、调用函数时
1 、
node.onclick = xxx(); 得到函数的返回值,也就是执行了该函数
2 、
node.onclick = function(){
xxx();
}
得到了该函数的引用,只有触发该事件时才执行。
14 、动态数组的删除 :即数组中的某个元素删除后后面的元素会自动向前一格。
[“ 山东 ”, “ 山西 ”, “ 广东 ”, “ 广西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
如果用 for(int i = 0 ;i<xx.length; i++) 会是
[“ 山西 ”, “ 广东 ”, “ 广西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 广西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 广西 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 广西 ”, “ 河南 ”]
数组越界
结论:动态数组需要从后向前删除
For(int i = xx.length ; i>0 ; i--)
记录一个联动选择的例子

javascript dom 操作详解 js加强

选择一个省以后,会有相应的地市出现在另一个 select 中

javascript dom 操作详解 js加强 
City.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="cities.js"></script> 
</head> 
<body> 
<select id="province"> 
<option value=""> 请选择 ...</option> 
<option value=" 河北省 "> 河北省 </option> 
<option value=" 辽宁省 "> 辽宁省 </option> 
<option value=" 山东省 "> 山东省 </option> 
</select> 
<select id="city"><option value="..."> 请选择 ...</option></select> 
</body> 
</html>

cities.js
window.onload = function(){ 
// 解析 XML 文档 , 得到 xml 文档的 china 根节点 
var xmlDocument = parseXml("cities.xml"); 
var chinaNode = xmlDocument.childNodes[1]; 
// 为 id="province" 的 select 节点添加 onchange 事件 , 获取选择的省的 value 
var provinceNode = document.getElementById("province"); 
provinceNode.onchange = function(){ 
// ** 清空 provice 节点出 <option value="..."> 请选择 ...</option> 的所有子节点 ** 
var cityNode = document.getElementById("city"); 
// cityNodeOptionNodes 数组时活动的 , 所以需要从后向前清 
var cityNodeOptionNodes = cityNode.getElementsByTagName("option"); 
var length = cityNodeOptionNodes.length; 
for(var i = length - 1; i > 0; i--){ 
cityNode.removeChild(cityNodeOptionNodes[i]); 
} 
var provinceValue = this.value; 
// 用 provinceValue 去 xml 文档中获取对应的 province 节点 
var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']"); 
// 获取 3 provinceNodeInXmlFile 的所有 city 子节点的文本值 : cityValue 
var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city"); 
for (var i = 0; i < cityNodesInXmlFile.length; i++) { 
var cityNodeInXmlFile = cityNodesInXmlFile[i]; 
var cityValue = cityNodeInXmlFile.firstChild.nodeValue; 
// 利用 得到的文本值创建 option 节点 : <option value='cityValue'>cityValue</option> 
var optionNode = document.createElement("option"); 
optionNode.setAttribute("value", cityValue); 
var optionNodeTextNode = document.createTextNode(cityValue); 
optionNode.appendChild(optionNodeTextNode); 
// 把创建好的 option 节点添加到 id="city" 的 select 节点中 
cityNode.appendChild(optionNode); 
} 
}; 
// 解析 xml 文件的函数 
function parseXml(fileName){ 
//IE 内核的浏览器 
if (window.ActiveXObject) { 
// 创建 DOM 解析器 
var doc = new ActiveXObject("Microsoft.XMLDOM"); 
doc.async = "false"; 
// 加载 XML 文档 , 获取 XML 文档对象 
doc.load(fileName); 
return doc; 
} 
//Mozilla 浏览器 
else 
if (window.DOMParser) { 
// 创建 DOM 解析器 
var p = new DOMParser(); 
// 创建 DOM 解析器 
return p.parseFromString(fileName, "text/xml"); 
} 
else { 
return false; 
} 
} 
}

cities.xml
<?xml version="1.0" encoding="GB2312"?> 
<china> 
<province name=" 河北省 "> 
<city> 石家庄 </city> 
<city> 邯郸 </city> 
<city> 唐山 </city> 
<city> 张家口 </city> 
<city> 廊坊 </city> 
</province> 
<province name=" 辽宁省 "> 
<city> 沈阳 </city> 
<city> 大连 </city> 
<city> 鞍山 </city> 
<city> 抚顺 </city> 
<city> 铁岭 </city> 
</province> 
<province name=" 山东省 "> 
<city> 济南 </city> 
<city> 青岛 </city> 
<city> 威海 </city> 
<city> 烟台 </city> 
<city> 潍坊 </city> 
</province> 
</china>

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
Angular2库初探
Mar 01 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 #Javascript
JavaScript 事件查询综合
Jul 13 #Javascript
JavaScript 事件对象的实现
Jul 13 #Javascript
Prototype Date对象 学习
Jul 12 #Javascript
Prototype Function对象 学习
Jul 12 #Javascript
Prototype Object对象 学习
Jul 12 #Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 #Javascript
You might like
web方式ftp
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python删除列表内容
2015/08/04 Python
python 网络爬虫初级实现代码
2016/02/27 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python wordcloud库安装方法总结
2020/12/31 Python
店长助理岗位职责
2013/12/13 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
租房协议书范文
2014/08/20 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书