javaScript DOM使用
- - CSDN博客互联网推荐文章通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素. 1 修改HTML元素内容. document.write(Date()); //在输入流中直接写
document.getElementById(id).innerHTML=new HTML. //改变已经有的元素内容
document.getElementById("image").src="landscape.jpg";.
javaScript DOM使用
标签：
javascript
dom
| 发表时间：2014-04-29 22:15 | 作者：zhuhuangtianzi
出处：http://blog.csdn.net
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素
1 修改HTML元素内容
利用这个可以改变文字的大小，颜色，字体等，示例如下：
<1> 使用DOM语句
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<2> 在元素标签中分配事件，使用函数
<3> 在javaScript脚本中添加匿名事件
这个格式跟前面的不一样，以function开头
document.getElementById("myBtn").onclick=displayDate;
<5> 常见的事件
onload //进入页面
onunload //离开页面
onchange //用户改变输入字段的内容时
onmouseover //鼠标移动进去
onmouseout //鼠标离开
onmousedown //鼠标按键按下
onmouseup //鼠标按键弹起
onclick //单击
4 javaScript创建或者删除节点
<1> 创建新节点
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
<2> 删除节点
如需删除 HTML 元素，您必须首先获得该元素的父元素：
1 修改HTML元素内容
document.write(Date()); //在输入流中直接写
document.getElementById(id).innerHTML=new HTML //改变已经有的元素内容
document.getElementById("image").src="landscape.jpg"; //改变属性值
2 修改CSS的值
document.getElementById(id).style.property=new style利用这个可以改变文字的大小，颜色，字体等，示例如下：
document.getElementById("p2").style.color="blue"; //改变颜色
onclick="document.getElementById('p1').style.visibility='visible'" /> //改变可见性
3 对事件作出反应
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。<1> 使用DOM语句
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<2> 在元素标签中分配事件，使用函数
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body> <3> 在javaScript脚本中添加匿名事件
这个格式跟前面的不一样，以function开头
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
<4> javaScript中添加事件
这个需要注意的是，函数后面不能添加括号（）。document.getElementById("myBtn").onclick=displayDate;
<5> 常见的事件
onload //进入页面
onunload //离开页面
onchange //用户改变输入字段的内容时
onmouseover //鼠标移动进去
onmouseout //鼠标离开
onmousedown //鼠标按键按下
onmouseup //鼠标按键弹起
onclick //单击
4 javaScript创建或者删除节点
<1> 创建新节点
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html> <2> 删除节点
如需删除 HTML 元素，您必须首先获得该元素的父元素：
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
作者：zhuhuangtianzi 发表于2014-4-29 14:15:17 原文链接
阅读：72 评论：0 查看评论
相关 [javascript dom] 推荐：
Javascript的DOM操作
- - CSDN博客Web前端推荐文章返回对拥有指定id的第一个对象进行访问. 返回带有指定名称的节点集合. 返回带有指定标签名的对象集合. 返回带有指定class名称的对象集合. 参数：是否复制原节点的所有属性. 注意：IE会忽略节点间生成的空白文本节点(例如，换行符号)，而Mozilla不会这样做. 在删除指定节点的时候不会出错，但是如果要删除最后一个子结点或者是第一个子结点的时候，就会出现问题.
javascript之XML DOM的解析
- - ITeye博客javascript之XML DOM的解析. . 长春 . 吉林市 . 四平 . 松原 . 通化 . .
JavaScript DocumentFragment：更快捷的操作DOM的途径
- - WebHek我相信很少人知道JavaScript里还有这样一个很有用的东西：DocumentFragment. 程序员可以使用DocumentFragment将一批子元素添加到任何类似node的父节点上，对这批子元素的操作不需要一个真正的根节点. 程序员可以不依赖可见的DOM来构造一个DOM结构，而 效率高是它真正的优势，试验表明，它比直接操作DOM快70%.
jQuery参考实例 1.2 在DOM加载完毕，页面元素完全加载之前运行jQuery/JavaScript代码
- - CSDN博客推荐文章本文翻译自jQuery Cookbook (O’Reilly 2009) 1.2 Executing jQuery/JavaScript Code After the DOM Has Loaded but Before Complete Page Load. 主流的JavaScript应用程序一般只在DOM完全加载后才运行JS代码.
DOM详解
- - CSDN博客推荐文章 1.XML解析方式分为两种：dom和sax. (1)dom：(Document Object Model, 即文档对象模型) 是 W3C 组织推荐的处理 XML 的一种方式. (2) sax：(Simple API for XML) 不是官方标准，但它是 XML 社区事实上的标准，几乎所有的 XML 解析器都支持它.
DOM优化
- - JavaScript - Web前端 - ITeye博客1，Javascript语音与DOM操作就像孤岛. 他们之间的通行是要借助船的，而使用船是有很大成本的. 所以，要先做完一个再做另一个，最好不要交替进行. 如：添加1000个li时，先用一个字符串拼接好，最后一次追加到父节点，而不是向父节点追加1000次，一次追加一个. 如：添加1000个li时，先放到fragment，再添加到UL中.
Android DOM解析XML
- - CSDN博客移动开发推荐文章if(personChilds.item(y).getNodeType()==Node.ELEMENT_NODE){//判断当前节点是否是元素类型节点. 作者：jaycee110905 发表于2013-2-7 21:04:29 原文链接. 阅读：78 评论：0 查看评论.
jquery和DOM比较
- - JavaScript - Web前端 - ITeye博客1、window.onload和$(document).ready()的区别. 必须等整个网页中所有的内容加载完毕后(包括图片)才能执行. 网页中所有DOM结构绘制完毕后就执行,可能DOM元素并没有加载完. 2、jquery对象和DOM对象的区别. Juery对象是包装DOM后的产生的对象,DOM是原生对象，是一个基本的文档结构.
DOM世界的观察者
- - 博客园_Ruby's Louvre浏览器自带的观察者实在太多了. 经典的不用说，就是onclick, attachEvent, addEventListner，可惜它们只是监听用户的行为. 不过这当中有个特例是propertychange，当元素的属性，不管是自定义还是原生，只要发生改变，就会触发回调. 我们还可以通过它的事件对象的propertyName知道那个元素发生改变.