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计数器代码
Nov 04 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
jQuery聚合函数实例
May 21 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 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
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python怎么自定义捕获错误
2020/06/29 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
北美最大的参茸药食商城:德成行
2020/12/06 全球购物
团员学习总结的自我评价范文
2013/10/14 职场文书
员工年终演讲稿
2014/01/03 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
法律意见书范文
2015/05/20 职场文书