javascript dom 操作详解 js加强
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
<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
// 解析 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
<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加强的更多相关文章
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- JavaScript 的DOM操作详解
内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- js学习--DOM操作详解大全一（浏览器对象）
一.客户端中的window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. w ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- js学习--DOM操作详解大全 前奏（认识DOM）
一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...
- js学习--DOM操作详解大全二（window对象）
一.window - 计时器 1､setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...
- 【转】javascript日期操作详解(脚本之家整理)
时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...
- javascript日期操作详解
时间对象是一个我们经常要用到的对象,无论是做时间输出.时间判断等操作时都与这个对象离不开.除开JavaScript中的时间对象外,在VbScript中也有许多的时间对象,而且非常好用.下面还是按照我们 ...
随机推荐
- linux 入门命令总结
1,tree -d /etc/ 参数表示只显示目录 -f 显示内容的完整 -i 不显示树枝显示完整路径2,mkdir -p 递归创建多级目录 -v 显示创建目录的过程 -m 设置目录的默认权限 mkd ...
- Java基础25-静态代码块
/* 静态代码块 格式: static{ 静态代码块中执行语句 } 特点:随着类的加载而执行,并且只会执行一次,并且还优先于主函数. 作用:用于给类进行初始化 */ public class Test ...
- C++11并发编程：原子操作atomic
一:概述 项目中经常用遇到多线程操作共享数据问题,常用的处理方式是对共享数据进行加锁,如果多线程操作共享变量也同样采用这种方式. 为什么要对共享变量加锁或使用原子操作?如两个线程操作同一变量过程中,一 ...
- java中面向对象的三大特性小结
java中面向对象的三大特性:封装.继承.多态 封装 把抽象的数据和对数据的操作封装在一起,隐藏变量的实现细节.数据被保护在内部,程序的其他部分只有通过被授权的操作(成员方法)才能对数据进行访问. 1 ...
- C# 使用cookie实现登录
首先,我们需要做的是什么? 我们成功登录之后,跳转到主界面,然后主界面的登录按钮变成头像啥的.下一次打开网页就要判断有没有登录过,有cookie就不需要登录,直接显示头像 1.成功登录后,客户端请求服 ...
- tornado基本使用【服务】
1.安装 2.请求处理程序和请求参数 1.安装 pip install tornado 2.请求处理程序和请求参数 Tornado 的 Web 程序会将 URL 或者 URL 范式映射到 tornad ...
- linq（查询）
1.改变数据库某一字段的属性 db.tableName.ToList().ForEach(x => x.State = false); 2.排序 db.tableName..toList().O ...
- Spring入门案例 idea创建Spring项目
spring入门案例 idea创建spring项目 Spring介绍 Spring概述 Spring是一个开源框架,Spring是2003年兴起的轻量级java开发框架,由Rod Johnson 在其 ...
- python占位符%s,%d,%r,%f
input接收的所有输入默认都是字符串格式 1.%s代表字符串占位符 conn, client_addr = phone.accept() print(conn) print(client_addr) ...
- arcgis server 10.1 发布动态图层展示海量及频繁更新的数据步骤
Arcgis server 发布动态图层及调用动态图层 做这个动态图层功能的原由是 有一个30万的数据需要通过arcgis GP工具转成shp然后渲染加载进地图,原来的做法是遍历生成shp面要素,读 ...