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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
js实现查询商品案例
Jul 22 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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漏洞小结
2012/02/05 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python三级菜单的实例
2017/09/13 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
scrapy爬虫完整实例
2018/01/25 Python
Python的Lambda函数用法详解
2019/09/03 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python模块常用用法实例详解
2019/10/17 Python
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
房屋买卖协议样本
2014/11/16 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书