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 相关文章推荐
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript多线程详解
Aug 12 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
element多个表单校验的实现
May 27 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
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
Smarty保留变量用法分析
2016/05/23 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
详解ES6中的let命令
2020/04/05 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python 为什么说eval要慎用
2019/03/26 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python将string转换到float的实例方法
2019/07/29 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
Python进行统计建模
2020/08/10 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
合作经营协议书范本
2014/04/17 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
小学入学感言
2015/08/01 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书