23、Javascript DOM
DOM
Document Object Model（文档对象模型）定义了html和xml的文档标准。
DOM 节点树
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>程序改变世界！</h1>
<a href="#">Hello world!</p>
</body>
</html>
事件
文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。
onload事件
页面DOM加载完后触发。
window.onload=function()
{
alert("加载完毕");
}
onclick事件
单击触发事件。
<script>
var foo = function(){
alert("点我？");
};
</script>
按钮
<button onclick="foo();">按钮</button>
<script>
var foo = function(){
alert("点我？");
return false;
};
</script> A链接 需要指定返回值，否则会跳转
<a href="http://cnblogs.com" onclick="return foo();"> 博客园 </a>
访问DOM元素
document.getElementById() 根据Id获取节点
<input type="button" value="点击" id="btn"/>
<script>
window.onload=function()
{
var btn = document.getElementById("btn");
btn.onclick=function(){ //为该元素添加点击事件
alert("点我？");
}
}
</script>
document.getElementsByName() 获取指定名称相同的元素集合
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex"> 女
<script>
var sex = document.getElementsByName("sex");
alert(sex.length);
</script>
document.getElementsByTagName() 获取HTML标签名的元素集合
<a href="http://cnblogs.com/">博客园</a>
<a href="http://cnblogs.com/baidawei/">海盗屋</a>
<script>
var htmlA = document.getElementsByTagName("a");
for(var i = 0;i<htmlA.length;i++){
htmlA[i].onclick=function(){
return false; //禁用
}
}
</script>
分组处理getElementsByTagName
<div id="ok">
<a href="http://cnblogs.com/">博客园</a>
<a href="http://cnblogs.com/baidawei/">海盗屋</a>
</div>
<hr> <!--以下可用-->
<a href="http://cnblogs.com/">博客园</a>
<a href="http://cnblogs.com/baidawei/">海盗屋</a>
<script>
var htmlA = ok.getElementsByTagName("a"); //注意元素id.getElementsByTagName
for(var i = 0;i<htmlA.length;i++){
htmlA[i].onclick=function(){
return false; //禁用
}
}
</script>
document.getElementsByClassName() 获取指定类名的元素集合
<div class="c">第一个</div>
<div class="c">第二个</div>
</body>
<script>
var node = document.getElementsByClassName("c")[0];
alert(node.innerHTML);
</script>
文档结构
<div id="ok">
<a href="http://cnblogs.com/">博客园</a>
<a href="http://cnblogs.com/baidawei/">海盗屋</a>
</div>
<script>
var ok = document.getElementById("ok");
document.write(ok.childNodes.length); //该节点下的所有子节点，包含文本节点 5个
document.write(ok.parentNode.nodeName); //该节点的父节点 body
document.write(ok.firstChild.nodeName); //第一个子节点 text
document.write(ok.lastChild.nodeType); //最后一个子节点 3
document.write(ok.nextSibling.nodeName); //下一个兄弟元素 text
document.write(ok.previoursSibling); //上一个兄弟元素
document.write(ok.nodeType); //1 9代表Document节点，1代表Element节点，3代表Text节点，8代表Comment节点，11代表DocumentFragment节点
document.write(ok.nodeValue); //null text节点的文本内容
document.write(ok.nodeName); //div 元素的标签名
</script>
操作节点属性
<div id="ok">
<a href="http://cnblogs.com/">博客园</a>
<a href="http://cnblogs.com/baidawei/">海盗屋</a>
</div>
<script>
var htmlA = document.getElementsByTagName("a");
var c = htmlA[0].getAttribute("href"); //获取属性
document.write(c);
htmlA[0].setAttribute("href","http://www.baidu.com/"); //设置属性
</script>
操作样式
<p>一段测试文字</p>
<script>
//设置样式
var p = document.getElementsByTagName("p")[0];
p.style.color = 'red';
p.style.display = 'inline';
p.style.borderTop = "solid"; //所有css样式border-top 去掉-改大写
</script>
创建节点
document.createElement() 创建元素节点
<div id="container">
</div>
<script>
//创建节点
var container = document.getElementById("container");
//创建元素节点
var span = document.createElement("span");
//设置文本带html innerText不带html
span.innerHTML = "<h1>追加的span</h1>";
//添加属性
span.setAttribute("href","http://cnblogs.com/");
//追加到尾部
container.appendChild(span);
</script>
document.createTextNode() 创建文本节点
<div id="container">
</div>
<script>
var container = document.getElementById("container"); //创建文本节点 无任何标签
var textNode = document.createTextNode("文本");
container.appendChild(textNode);
</script>
插入节点
<ul>
<li>啦啦阿拉</li>
<li>啦啦阿拉</li>
<li>啦啦阿拉</li>
</ul>
<script>
//插入节点
var newItem = document.createElement("li");
newItem.innerHTML = "新插入的";
var list = document.getElementsByTagName("ul")[0];
list.insertBefore(newItem,list.childNodes[0]); //第二个参数插入的位置
</script>
删除节点
<body id="body">
<p>1111111111</p>
<p id="p">22222222</p>
</body>
<script>
var body = document.getElement("body");
var p = document.getElementById("p");
body.removeChild(p);
p.style.display="none"; //一般创建后不会删除 更多的是隐藏
</script>
23、Javascript DOM的更多相关文章
- 前端基础：JavaScript DOM对象
JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
- Css、javascript、dom(二)
一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size ...
- Python自动化 【第十五篇】：CSS、JavaScript 和 Dom介绍
本节内容 CSS javascript dom CSS position标签 fixed: 固定在页面的某个位置 relative + absolute: 相对定位 opacity:0.5 设置透明度 ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- Python自动化运维之23、Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.最为关心的是,DOM把网页 ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
随机推荐
- EAFP和LBYL 两种防御性编程风格
EAFP:Easier to ask for forgiveness than permission 获得事后原理总是比事先得到许可要容易的多. 这个EAFP在python中表现的比较多.EAFP,T ...
- JAVA基础知识点（转载的）
转载请注明出处:http://blog.csdn.net/ns_code/article/details/8846697 1.使用浮点型数值时,默认的类型是double,后面加上f或F才被识别为flo ...
- Android 逐帧动画isRunning 一直返回true的问题
AnimationDrawabl主要通过xml实现逐帧动画,SDK实例如下: An AnimationDrawable defined in XML consists of a single < ...
- 【转】Android ROM研究---Android build system增加模块
原文网址:http://hualang.iteye.com/blog/1141315 Android build system就是编译系统的意思 在我们需要向自己编译的源代码中增加模块的时候,需要一些 ...
- （转载）prepare函数的学习，我要学习php第二天
(转载)http://www.boyuan78.com/htm/company/2012_1030_60.html prepare函数的学习,我要学习php第二天 $mysqli = new mysq ...
- org.springframework.web.context.ContextLoaderListener 转
ContextLoaderListener的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在web ...
- Linq to SQL 类型的对象图包含循环，如果禁用引用跟踪，择无法对其进行序列化。
在使用Linq to SQL并序列化一个数据对象的时候报System.InvalidOperationException异常,序列化类型 的对象时检测到循环引用. 异常信息(部分): ---> ...
- Linux自定义命令
linux自定义命令,就是给当前命令取个别名.比如:ls 列出当前的文件,rm + 文件名 就能删除该文件,如何自定义命令,可以使用alias比如:alias gobin='cd /opt/tomca ...
- apache 服务发布多个项目，只需要更改配置文件（需要设定虚拟主机）
http://www.php186.com/content/article/apache/24609.html http://blog.sina.com.cn/s/blog_6b689d5901013 ...
- UVa 11825 集合dp
#include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...