- 浏览: 480345 次
- 性别:
- 来自: 沈阳
文章分类
- 全部博客 (437)
- Windows设置 (2)
- oracle数据库 (39)
- bug--jsp (4)
- j2se (13)
- js (40)
- bug-tomcat不能启动程序 (1)
- Hibernate (29)
- eclipse (20)
- java (65)
- 设计模式 (6)
- bug (18)
- PL/SQL (11)
- 前台 (5)
- 杂谈 (25)
- UML (1)
- jdbc编程 (2)
- 技术调研 (1)
- 数据通信 (2)
- ios (1)
- servlet自学笔记 (10)
- tomcat (9)
- SQL学习笔记 (6)
- java工具 (1)
- 数据库设计 (4)
- javascript (10)
- jsp (11)
- struts (17)
- ajax (7)
- linix/Unix (6)
- 资源 (3)
- spring (14)
- 算法 (5)
- 计算机网络 (2)
- http (5)
- c++ (2)
- web应用 (3)
- jvm (5)
- java中的字符编码 (14)
- java代码库 (2)
- classloader (1)
- 读书笔记 (1)
- c (1)
- 开源软件 (1)
- svn (1)
- AOP (1)
- java序列化 (1)
- 多线程 (4)
- The legendary programmers (1)
- Apache http Server (1)
- html tag (3)
- struts1.X学习笔记 (5)
- buffalo (1)
- 自己收藏 (0)
- TOEFL(IBT) (1)
- 网络翻墙 (0)
- 编译原理 (1)
- 书籍推荐 (1)
- css (10)
- javaee环境搭建资料 (1)
- 开源工具 (1)
- 美国生活 (1)
- spring自学 (3)
- log4j (3)
- 算法与数据结构 (5)
- 病毒,插件处理大全 (1)
- flex (2)
- webservice (1)
- git (7)
- cs (1)
- html (4)
- javaee (6)
- 开车 (0)
- springmvc (3)
- 互联网架构 (2)
- intellij idea (18)
- maven (15)
- mongodb (2)
- nginx (1)
- react (3)
- java基础例子 (2)
- springboot (2)
- 培训 (5)
- mysql (3)
- 数据库 (3)
- 生活 (2)
- intellij (3)
- linux (2)
- os (3)
最新评论
-
潇洒天涯:
[color=blue][color=cyan] ...
oracle 通过 nvl( )函数sql 查询时为 空值 赋默认值 -
hekai1990:
受教了..
oracle中的varchar2
简单的表格:
<table>
<tr>
<td id="TEST">
<input type="submit" value="确定">
<input type="button" value="取消">
</td>
</tr>
</table>
经测试:
var td= document.getElementById("TEST");
alert(td.childNodes.length);结果为4
百思不得其解,阅读相关资料后,发现原来JS中,空格也是作为一个文本节点,而两个input元素后面都有空格
所以都作为一个文本节点,所以结果为4
删除空格后结果为2
为了处理里面的空格节点,用以下函数来处理
function cleanWhitespace(element)
{
for(var i=0; i<element.childNodes.length; i++)
{
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
处理结点cleanWhitespace(document.getElementById("TEST"))后,OK,解决
另附:
DOM基本方法
一.直接引用结点
1.document.getElementById(id);
--在文档里面通过id来找结点
2.document.getElementByTagName(tagName);
--返回一个数组,包含对这些结点的引用
--如:document.getElementByTagName("span");将返回所有类型为span的结点
二.间接引用结点
3.element.childNodes
--返回element的所有子结点,可以用element.childNodes[i]的方式来调用
--element.firstChild=element.childNodes[0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--引用父结点
5.element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点
三.获得结点信息
6.nodeName属性获得结点名称
--对于元素结点返回的是标记名称,如:<a herf><a>返回的是"a"
--对于属性结点返回的是属性名称,如:class="test" 返回的是test
--对于文本结点返回的是文本的内容
7.nodeType返回结点的类型
--元素结点返回1
--属性结点返回2
--文本结点返回3
8.nodeValue返回结点的值
--元素结点返回null
--属性结点返回undefined
--文本结点返回文本内容
9.hasChildNodes()判断是否有子结点
10.tagName属性返回元素的标记名称
--这个属性只有元素结点才有,等同于元素结点的nodeName属性
四.处理属性结点
11.每个属性结点都是元素结点的一个属性,可以通过(元素结点.属性名称)访问
12.利用setAttribute()方法给元素结点添加属性
--elementNode.setAttribute(attributeName,attributeValue);
--attributeName为属性的名称,attributeValue为属性的值
13.使用getAttribute()方法获得属性值
--elementNode.getAttribute(attributeName);
五.处理文本结点
14.innerHTML和innerText属性,这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes[i]引用文本结点的时候,一般要处理:
<script language"javaScript" type="text/javascript">
function cleanWhitespace(element)
{
for(var i=0; i<element.childNotes.length; i++)
{
var node = element.childNodes[i];
if(node.nodeType == 3 && !/\S/.test(node.nodeValue))
{
node.parentNode.removeChild(node);
}
}
}
</script>
六.改变文档的层次结构
15.document.createElement()方法创建元素结点
--如:document.createElement("Span");
16.document.createTextNode()方法创建文本结点
--如:document.createTextNode(" "); //注:他不会通过html编码,也就是说这里创建的不是空格,而是字符串
17.使用appendChild()方法添加结点
--parentElement.appendChild(childElement);
18.使用insertBefore()方法插入子节点
--parentNode.insertBefore(newNode,referenceNode);
--newNode为插入的节点,referenceNode为将插入的节点插入到这之前
19.使用replaceChild方法取代子结点
--parentNode.replaceChild(newNode,oldNode);
--注:oldNode必须是parentNode的子结点,
20.使用cloneNode方法复制结点
--node.cloneNode(includeChildren);
--includeChildren为bool,表示是否复制其子结点
21.使用removeChild方法删除子结点
--parentNode.removeChild(childNode);
七.表格的操作
--注:ie中无法直接将一个完整的表格结点插入到文档中
22.添加行和单元格
var _table=document.createElement("table"); //创建表
table.insertRow(i); //在table的第i行插入行
row.insertCell(i); //在row的第i个位置插入单元格
23.引用单元格对象
--table.rows[i].cells[i];
24.删除行和单元格
--table.deleteRow(index);
--row.deleteCell(index);
25.交换两行获得两个单元格的位置
node1.swapNode(node2);
--这个方法在firefox中将出错
通用方法:
function swapNode(node1,node2)
{
var _parent=node1.parentNode;
var _t1=node1.nextSubling;
var _t2=node2.nextSubling;
if(_t1)parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
if(_t2)parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
发表评论
-
【转】Jquery修改iframe内容
2018-12-19 04:24 797query取得iframe中元素的几种方法 在iframe ... -
【转】jQuery ajax()使用serialize()提交form数据
2018-12-19 04:22 844jQuery的serialize()方法通过序列化表单值,创 ... -
js获取web的root path
2018-04-25 00:50 964function getRootPath(){ // ... -
[转]js 判断变量的数据类型
2018-04-06 06:03 0http://www.jb51.net/article/457 ... -
jquery,ajax,jsonp例子+springmvc后台
2017-11-05 20:26 685<script src="js/jquer ... -
jQuery之防止冒泡事件
2017-09-28 21:16 464冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点 ... -
【转】解析Javascript事件冒泡机制
2017-09-28 21:11 6741. 事件 ... -
Chrome 的审查元素功能有哪些奇技淫巧?
2017-09-27 18:31 551https://www.zhihu.com/question/ ... -
【转】javascript运行机制之执行顺序详解
2017-08-02 15:24 501JavaScript是一种描述型脚本语言,它不同于java ... -
让DIV中的垂直滚动条自动滚到最底部
2017-07-16 10:23 1195在聊天窗口中当消息增多超过消息窗体DIV的高度时就会出现滚动 ... -
10个JavaScript测试
2017-05-03 10:12 4731、考察this -
jsonp详解
2017-03-31 10:15 505json相信大家都用的多 ... -
必读js书籍
2017-01-13 15:33 372一个很好的起点是Kyle Simpson的系列读物:Y ... -
window.close()不出现提示框的方法
2015-12-02 15:15 690当我们使用window.close()时经常会出现一个提示框 ... -
document.getElementByClassName("classname")是原生JS吗?
2015-04-17 19:31 883需求:比较税前薪资是否在薪资范围内,超过范围则薪资输出变红色 ... -
【转】Ajax框架Buffalo深度研究
2012-11-20 11:33 1296Buffalo深度研究 ——2010.01.11, IT ... -
js dom
2012-11-08 19:03 0Dom元素基本操作方法API,先记录下,方便以后使用。 ... -
HTML中相对URL的选取
2012-11-08 18:50 758转自:http://blog.csdn.net/g ... -
【转】JS DOM
2012-11-01 20:48 671Dom元素基本操作方法AP ... -
【转】JS监听关闭浏览器事件
2012-09-19 13:37 979Onunload与Onbeforeunload Onunloa ...
相关推荐
下载点击上传资源即表示您确认该资源不违反资源分享的使用条款,并且您拥有该资源的所有版权或者上传资源的授权
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
一个灵活的 Web 组件,用于以脚本化但交互的方式演示 JavaScript/DOM 代码。 它是基于 Adrian Cooney 的早期版本为开发的。 : bower install demo-x : npm install demo-x完整版本: 下载: 或发布历史2014-12-04 ...
JavaScript.DOM编程艺术(第2版)源码
JavaScript Dom编程艺术源代码,包括所有素材。
这是javascript DOM这本书的源代码。书中总共有12章。
JavaScript DOM编程艺术 第2版+代码,英文版的书和代码
JavaScript DOM编程艺术源代码,有需要的同学拿去。
本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中,使...
<<JavaScript DOM 高级程序设计>> 一书的配套源代码,涵盖了书中的代码例子.
手工HTML代码转换为DOM代码,这个小例子是我在学习JavaScript DOM过程中遇到的小例子,感觉非常好,拿来分享给大家。
javascript DOM 编程艺术源码 很详细 每一课都有
JS DOM 操作实现代码,学习dom操作的朋友可以参考下。
英文原版DOM Scripting Web Design with JavaScript and the Document Object Model,语言通俗易懂,适合dom和javascript初学者。
web开发
JavaScript DOM编程艺术 源代码.rar code javascirpt初学者 javascript code
本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中,使...
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
JavaScript DOM编程艺术 源代码