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中也有许多的时间对象,而且非常好用.下面还是按照我们 ...
随机推荐
- shell的常用脚本一
批量创建用户名脚本: ######################################################################### # File Name: cr ...
- 阻止事件的默认行为，例如click <a>后的跳转~
在W3C中,使用preventDefault()方法: 在IE中,使用window.event.returnValue = false.
- backbone应用笔记
由于公司手机端web的需要,最近开始用上backbone,之前觉得很难学,也一直没看到前端mvc具体是个啥,后来由于项目紧急,就抽空看了一遍underscore和backbone的源码,收获还是蛮大的 ...
- SpringBoot | 第三十五章：Mybatis的集成和使用
前言 最近收到公众号留言说,单纯的Mybatis的集成和使用.前面在第九章:Mybatis-plus的集成和使用介绍了基于mybatis-plus的集成和使用.后者也只是对mybatis进行了功能增强 ...
- PAT 1037 Magic Coupon
#include <cstdio> #include <cstdlib> #include <vector> #include <algorithm> ...
- HTML 5中的新特性
HTML 5中的新特性 html5新增了一些语义化更好的标签元素.首先,让我们来了解一下HTML语义化. 1.什么是HTML语义化? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开 ...
- Python爬虫之三种数据解析方式
一.引入 二.回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需 ...
- Java开发坏境配置
在"系统变量"中设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击"编辑",不存在则点击"新建" ...
- Android activity跳转并且回调
假设A页面要跳到B页面,A页面需要获取B页面传回来的参数来确定显示哪个列表.主要代码如下: 在A页面中: Intent intent = new Intent(); ...
- ArcGIS Enterprise 10.5.1 静默安装部署记录（Centos 7.2 minimal）- 6、总结
安装小结 安装完成后,首先我们需要将Datastore托管给Server,再将Server托管给Portal以此来完成整个单机版Enterprise 部署流程.为了测试流程是否正确,我们可以采用上传一 ...