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代码要注意的几条规则
Sep 10 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
js实现日期级联效果
Jan 23 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 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购物网站支付paypal使用方法
2010/11/28 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
将jquery.qqFace.js表情转换成微信的字符码
2017/12/01 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
JS实现音量控制拖动
2020/01/15 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python中正则表达式的使用详解
2014/10/17 Python
Python中常见的数据类型小结
2015/08/29 Python
python实现简易数码时钟
2021/02/19 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
奠基仪式策划方案
2014/05/15 职场文书
医院党员公开承诺书
2014/08/30 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis