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中也有许多的时间对象,而且非常好用.下面还是按照我们 ...
随机推荐
- redis API ---python
一, 安装配置 必须安装python3以上 配置文件自己下载,搜索名字百度 解压---->Python --->./configure-->yum install -y zlib* ...
- (转) sync命令
sync sync命令 sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的 ...
- MyISAM的前缀压缩索引在索引块中的组织方式
纯粹自己的理解,哪位大佬看到了还请指正. 首先贴一张<高性能MySQL>中的一段话: 这句话的意思是说,MyISAM使用b+树组织索引.也就是说无论索引压缩与否,组织方式一定是B+树. 下 ...
- SVN创建资源库和远程连接配置
SVN创建资源库和远程连接配置 本机安装的是TortoiseSVN-1.7.5.22551-win32-svn-1.7.3.msi 安装好后会在鼠标右键中出现如图最后两项的选项: 创建svn资源库: ...
- pat1014. Waiting in Line (30)
1014. Waiting in Line (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Suppo ...
- angular2 遇到的问题汇总
angular2 学习资源集锦:https://github.com/timjacobi/angular2-education 在学习angular开发项目过程遇到的问题: 1. 不同componen ...
- 【Shell】按行读取文件内容
方法1:while循环中执行效率最高,最常用的方法. function while_read_LINE_bottm(){ While read LINE do echo $LINE done < ...
- package.json中dependencies 和devDependencies的差异
我们在日常开发中,经常会使用到npm安装对应的包,会经常在package.json中看到dependencies 和devDependencies 二者的区别: devDependencies:是你开 ...
- cf1072B. Curiosity Has No Limits(枚举)
题意 题目链接 给出两个序列\(a, b\),求出一个序列\(t\),满足 \[a_i = t_i | t_{i + 1}\] \[b_i = t_i \& t_{i + 1}\] 同时,\( ...
- drupal node机制理解
[1]根据结构的功能结构的不同,drupal划分为,node,user,comment等不同的结构,他们的结构是不同的.他们可以作为四个不同的抽象类,根据这个抽象类,分别有一套hook函数去控制实现的 ...