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中也有许多的时间对象,而且非常好用.下面还是按照我们 ...
随机推荐
- SQL Server 2008 SQL2012 SQL2014 收缩日志 清空删除大日志文件
SQL2008 SQL2012 SQL2014 的收缩日志 由于SQL2008对文件和日志管理进行了优化,所以以下语句在SQL2005中可以运行但在SQL2008中已经被取消:(SQL2005)Bac ...
- 使用bind配置DNS服务（CentOS 6.5）
DNS域名解析服务(Domain Name System)是用于解析域名与IP地址对应关系的服务,功能上可以实现正向解析与反向解析: 正向解析:根据主机名(域名)查找对应的IP地址. 反向解析:根据I ...
- 通过c++ 读写文本文件的中文乱码的解决方法
前提:VS2010 ,MFC ,文本文件为ANSI格式. 读文件: CString str,fileContent;CStdioFile myFile, File;if(myFile.Open(Gen ...
- 数组和json的相互转换
json_encode() <?php /*****一维数组*********/ //有键 $arr = array( 'a'=>1, 'b'=>2, 'c'=>3, ); $ ...
- 深入学习keepalived之一 keepalived的启动
1.keepalived的启动过程: 启动健康检查子进程和vrrp子进程.其中_WITH_LVS_,_WITH_VRRP_在configure和configure.in文件中定义. 源码如下: /* ...
- SpringBoot | 第三十一章：MongoDB的集成和使用
前言 上一章节,简单讲解了如何集成Spring-data-jpa.本章节,我们来看看如何集成NoSQL的Mongodb.mongodb是最早热门非关系数据库的之一,使用也比较普遍.最适合来存储一些非结 ...
- 使用setInterval函数改变网页背景的颜色
var icolor=0; var iNum=256; var iID=setInterval(setbgColor, 500); function setbgColor() { body.backg ...
- JavaWeb技术
1.简介 Java Web是用Java技术来解决相关web互联网领域的技术总和.web包括:web服务器和web客户端两部分.Java在客户端的应用有java applet,不过使用得很少,Java在 ...
- js之strict模式
JavaScript在设计之初,为了方便初学者学习,并不强制要求用var申明变量.这个设计错误带来了严重的后果:如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量: i = 10 ...
- HIVE的sql语句操作
Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...