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. Python Fileinput 模块

    作者博文地址:http://www.cnblogs.com/liu-shuai/ fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行. [默 ...

  2. Jvav Collection-List

    package 集合; import java.util.ArrayList; import java.util.Collection; /** * 集合和数组的区别: * 1.长度 * 数组长度固定 ...

  3. maven module

    通过将一个maven项目拆分成多个module,会引入一定的项目复杂度,但随着后期项目代码的逐渐增多,最直观的感受是,每次build代码,不必build整个项目,可节省很多时间. 如果各个module ...

  4. c#-foreach的秘密

    foreach的秘密 class Program { static void Main(string[] args) { //创建Person的对象 Person p1=new Person(); / ...

  5. CheckBox 样式

    .cb td {             width: 100px;         } .cb label {             display: inline-block;          ...

  6. MVC页面简单post提交

    页面代码 <script src="~/Scripts/jquery-1.10.2.js"></script> <script> $(funct ...

  7. 关于IQueryable和IEnumerable

    园里对这两个已经有很多文章作了深入的介绍,我总结些,当成笔记用. 一.具体判断用哪个上,如果是运行在本地内存中的,用IEnumerable,枚举该对象时,会立即反应查询结果. 如果是远程数据源,比如数 ...

  8. 04.Continue,和三元表达式的学习

    立即结束本次循环,判断循环条件,如果成立,则进入下一次循环,否则退出循环. 举例:运动员跑步喝水的例子 比如:我编写代码的时候,上个厕所,回来继续写代码 练习1: namespace _09.练习02 ...

  9. python的元组及其书写规矩

    1.元组 (1)元组看起来犹如列表,但使用圆括号而不是方括号来标识.定义元组后,就可以使用索引来访问其元素,就像访问列表元素一样. (2)元组的元素不可修改,但是可以赋值. 2.规矩 (1)缩进:建议 ...

  10. VS2012 无法启动 IIS Express Web

    用记事本打开项目的.csproj文件,定位到<WebProjectProperties>,把关于IIS的配置<DevelopmentServerPort>.<Develo ...