js加强操作实现代码。

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--)

记录一个联动选择的例子

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

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 dom 操作详解 js加强的更多相关文章

  1. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  2. JavaScript 的DOM操作详解

    内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...

  3. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  4. js学习--DOM操作详解大全一(浏览器对象)

    一.客户端中的window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. w ...

  5. JavaScript基础:DOM操作详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...

  6. js学习--DOM操作详解大全 前奏(认识DOM)

    一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...

  7. js学习--DOM操作详解大全二(window对象)

    一.window - 计时器 1、setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...

  8. 【转】javascript日期操作详解(脚本之家整理)

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...

  9. javascript日期操作详解

    时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...

随机推荐

  1. redis API ---python

    一, 安装配置 必须安装python3以上 配置文件自己下载,搜索名字百度 解压---->Python  --->./configure-->yum install -y zlib* ...

  2. (转) sync命令

    sync sync命令 sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的 ...

  3. MyISAM的前缀压缩索引在索引块中的组织方式

    纯粹自己的理解,哪位大佬看到了还请指正. 首先贴一张<高性能MySQL>中的一段话: 这句话的意思是说,MyISAM使用b+树组织索引.也就是说无论索引压缩与否,组织方式一定是B+树. 下 ...

  4. SVN创建资源库和远程连接配置

    SVN创建资源库和远程连接配置 本机安装的是TortoiseSVN-1.7.5.22551-win32-svn-1.7.3.msi 安装好后会在鼠标右键中出现如图最后两项的选项: 创建svn资源库: ...

  5. pat1014. Waiting in Line (30)

    1014. Waiting in Line (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Suppo ...

  6. angular2 遇到的问题汇总

    angular2 学习资源集锦:https://github.com/timjacobi/angular2-education 在学习angular开发项目过程遇到的问题: 1. 不同componen ...

  7. 【Shell】按行读取文件内容

    方法1:while循环中执行效率最高,最常用的方法. function while_read_LINE_bottm(){ While read LINE do echo $LINE done < ...

  8. package.json中dependencies 和devDependencies的差异

    我们在日常开发中,经常会使用到npm安装对应的包,会经常在package.json中看到dependencies 和devDependencies 二者的区别: devDependencies:是你开 ...

  9. cf1072B. Curiosity Has No Limits(枚举)

    题意 题目链接 给出两个序列\(a, b\),求出一个序列\(t\),满足 \[a_i = t_i | t_{i + 1}\] \[b_i = t_i \& t_{i + 1}\] 同时,\( ...

  10. drupal node机制理解

    [1]根据结构的功能结构的不同,drupal划分为,node,user,comment等不同的结构,他们的结构是不同的.他们可以作为四个不同的抽象类,根据这个抽象类,分别有一套hook函数去控制实现的 ...