zeng168cn
- 浏览: 98087 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
anybyb：
很详细，学习了
RSS从入门到精通（转载） -
hrsvici412：
浏览器的正中呢？布局中间放置的是iframe
Ext 中随着浏览器的变化window居中 -
Javakeith：
有点太长了！
RSS从入门到精通（转载）
-
getElementById(id)
这是通过id来访问某一元素，最常用的之一，例：<html>
<body>
<div id="myid">
test
</div>
<script language="javascript">
alert(document.getElementById("myid").innerHTML);
</script>
</body>
</html>
注意点：如果元素的ID不是唯一，则会取得第一个该ID名称的元素 -
getElementsByName(name)
这是通过name来取得某一堆元素（作为数组），看Element后面有个小s就知道了，ID是HTML文档中要求唯一的，name可以不是唯一，如checkbox、radio等地方会用到多个input用同一个name来识别是否为同党。对了，getElementsByName(name)仅用于取得input、radio、checkbox等元素，如<input name="myradio" type="radio" /> -
getElementsByTagName(tagname) 看这方法就知道这也是取得某一堆元素（作为数组），是通过TagName也就是标签名来取得。你可以遍历这个数组获得每一个单独的元素。当一个DOM结构很大时，可以通过它来有效地缩小搜查范围。
<html>
<head>
<script>
function test() {
testall=document.getElementsByTagName("body");
testbody=testall.item(0); //获得所有tagName是body的元素（当然每个页面只有一个）
testall=testbody.getElementsByTagName("p");// 获得body子元素种的所有P元素
testnode=testall.item(1); // 获得第二个P元素
alert(testnode.firstChild.nodeValue); //显示这个元素的文本
}
</script>
</head>
<body>
<p>hi</p>
<p>hello</p>
<script language="javascript">
test();
</script>
</body>
</html> -
appendChild(node)
向当前的元素（应该叫对象比较恰当）追加节点。<html>
<body>
<head>
</head>
<div id="test"></div>
<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
</body>
</html>
刚才我在第一个例子中为了显示出内容，用了innerHTML，刚才看到文章才得知innerHTMl不属于DOM。 -
removeChild(childreference)
删除当前节点的子节点，返回被删除的节点。
这个被删除的节点可以被插入到别的地方<html>
<body>
<div id="parent"><div id="child">A child</div></div>
<script language="javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("parent").removeChild(childnode)
</script>
</body>
</html> -
cloneNode(deepBoolean)
复制并返回当前节点的复制节点，复制节点是一个孤立节点，它复制了原节点的属性，在把这个新节点加入到document前，根据需要修改ID属性确保其ID的唯一。
这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。<html>
<body>
<p id="mynode">test</p>
<script language="javascript">
p=document.getElementById("mynode")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
</script>
</body>
</html> -
replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点<html>
<body>
<div id="mynode2">
<span id="orispan">span</span>
</div>
<script language="javascript">
var orinode=document.getElementById("orispan");
var newnode=document.createElement("p");
var text=document.createTextNode("test ppp ");
newnode.appendChild(text);
document.getElementById("mynode2").replaceChild(newnode, orinode);
</script>
</body>
</html>
<script type="text/javascript"></script>
分享到：
发表评论
-
Ext 中随着浏览器的变化window居中
2011-01-11 16:40 1211//** Ext.ux.CenterWindowPlugin ... -
ext 表单验证实例(转)
2010-12-19 19:21 1347/放在onReady的function（）{}中 Ext.Q ... -
点击左右滑动 jquery实现
2010-12-18 12:54 1887<!DOCTYPE html PUBLIC &quo ... -
一个最简单的例子，清楚说明回调函数的作用和强大功能
2010-11-15 14:54 2311回调函数(Callback Functions) 因为函数和 ... -
Array.prototype.slice.call自解
2010-08-26 11:48 1174为了研究Currying in Javascr ... -
js倒计时2
2010-08-26 11:45 689<script language="JavaS ... -
修改 window.setTimeout，使之可以传递参数和对象参数
2010-08-26 11:44 1125<script language="javas ... -
JS倒计时代码
2010-08-24 14:35 1253第一种：精确到秒的java ... -
JavaScript正则表达式exec和test方法实例！
2010-07-29 09:18 1124<script LANGUAGE="javas ... -
jQuery插件开发 - 其实很简单
2010-07-09 10:46 764【前言】jQuery已经被广泛使用，凭借其简洁的API，对DO ... -
Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）
2010-06-22 16:27 6661判断select选项中 是否存在Value="pa ... -
js技巧收集(200多个)
2010-06-17 18:06 8181.文本框焦点问题onBlur:当失去输入焦点后产生该事件on ... -
Javascript遍历页面控件
2010-06-10 17:41 728function validate(){ //var El ... -
javascript中showModalDialog和showModelessDialog区别
2010-06-10 14:40 1004javascript中showModalDialog和show ... -
利用JS中window.showModalDialog()详解
2010-06-10 14:34 930window.showModalDialog()方法 ... -
JavaScript事件绑定的方法说明
2010-06-10 14:33 978事件使得客户端的 JavaSc ... -
十个技术含量超高的JS图片展示特效
2010-05-18 17:32 18433十款超级酷的JS图片展示代码，一定会给你强烈的震撼，技术含量超 ... -
JavaScript CSS Style属性对照表
2010-05-15 11:42 700为了达到某种特殊的效果我们需要用Javascript动态的 ... -
介绍 JSON
2010-05-15 10:51 622JSON(JavaScript Object Notati ... -
JS小游戏贪吃蛇+详细注释
2010-05-08 11:49 1131<!DOCTYPE html PUBLIC " ...
相关推荐
10.7 减少对DOM元素直接操作/332 10.8 正确区分DOM对象与jQuery对象/334 10.8.1 DOM对象与jQuery对象的定义/334 10.8.2 DOM对象与jQuery对象的类型转换/335 10.9 本章小结/337 第11章 综合案例开发...
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。 回忆：DOM = Document Object Model（文档对象模型） 1、jQuery获得元素 三个简单实用的用于DOM操作的jQuery方法。 text() //设置或返回...
12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点及其范例 12.5.6 关于添加新行和排序的小技巧 12.6 读写数据--添加、修改和删除属性 12.7 外观与行为 12.7.1 DOM样式...
6.3.4 使用splice()方法添加和删除数组元素 6.3.5 修改length属性更改数组 6.3.6 调用Array对象的方法生成字符串 6.3.7 连接两个数组 6.3.8 常见属性和方法汇总 6.4 Date对象 6.4.1 生成日期对象的实例 6.4.2 如何...
6.3.4 使用splice()方法添加和删除数组元素 6.3.5 修改length属性更改数组 6.3.6 调用Array对象的方法生成字符串 6.3.7 连接两个数组 6.3.8 常见属性和方法汇总 6.4 Date对象 6.4.1 生成日期对象的实例 6.4.2 如何...
21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格...
• 2.14.htm 使用值的数据操作 • 2.15.htm 对数据的引用执行 • 2.16.htm 字符串的比较 第3章（\第3章） • 3.1.htm 表达式示例 • 3.2.htm 加号运算符应用 • 3.3....
21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格...
访问窗体元素 document.all("txt").focus(); document.all("txt").select(); 窗体命令 document.execCommand 窗体COOKIE document.cookie 菜单事件 document.oncontextmenu 创建元素 document....
方法与confirm()方法的使用 • 14.3.htm prompt()方法的使用 • 14.4.htm window.open()方法 • 14.5.htm 用链接和按钮实现窗口打开 • 14.6.htm 窗口的打开和关闭 • 14.7....
用于找出哪个 javascript file:line 插入了 DOM 元素的工具。 当您不熟悉代码库并且您看到一个 UI 元素并且您想知道它来自哪里时，这很有帮助。 仅适用于 javascript/jquery 应用程序。 截屏 安装 复制 doko.js ...
10.5.1 jquery在其他库前导入 10.5.2 jquery在其他库后导入 10.6 使用子查询优化选择器性能 10.7 减少对dom元素直接操作 10.8 正确区分dom对象与jquery对象 10.8.1 dom对象与jquery对象的定义 10.8.2 ...
实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 ...
2.7 访问DOM元素 2.8 小结 第3章 事件——扣动扳机 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择 3.1.2 基于一个页面执行多个脚本 3.1.3 缩短代码的简写方式 3.2 简单的...
2.7 访问DOM元素 2.8 小结 第3章 事件 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择 3.1.2 基于一个页面执行多个脚本 3.1.3 缩短代码的简写方式 3.1.4 与其他库共存 3.2 简单的事件 3.2.1 简单的...
允许使用标记为data-translate DOM元素动态切换语言环境； 允许使用标记为data-convert DOM元素动态切换货币； 将区域设置和货币首选项存储在用户cookie中以保持持久性。 假设条件 您有可用的最新版本的jQuery。 ...
代码说明：本章代码都具有一定危害性，可按照页面提示进行操作。 32.1.htm 字符串翻倍 32.2.htm 函数循环交叉调用 32.3.htm 无限递归调用 32.4.htm 构造无限数组 32.5....
对字符串使用正则表达式的方法 正则表达式示例：Wiki解析程序 第章:使用XML XML基础知识 用于处理XML的EX方法 XML对象 XMLList对象 初始化XML变量 组合和变换XML对象 遍历XML结构 使用XML命名空间 XML类型转换 读取...
• sample17.htm 使用“javascript:”语句调用函数或方法 • sample18.htm 通过事件调用JavaScript代码 • sample19.htm 一段错误的JavaScript代码（调试用） 第3章（\代码\第03章） • ...
结合用于DOM操作，动画，事件处理，UI元素和数学的功能，它们使现代浏览器的Web开发变得轻松有趣。 部署方式 使用npm run build生成打字稿文档。 使用npm start运行Jekyll服务器。 工作正在进行中 !! 样式改进，...