Dom编程
Dom编程
Dom是一种用于HTML和XML文档的编程接口，是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。
1、选择器
document.getElementById('id'); #通过 id 查找 HTML 元素
document.getElementsByClassName('name'); #通过class查找 HTML 元素
document.getElementsByName('name'); #通过name查找 HTML 元素
document.getElementsByTagName('tagname'); #通过标签名查找 HTML 元素
#层级查找
#例：查找 id="a1" 的元素，然后查找 "a1" 中的所有 <p> 元素
var x=document.getElementById("a1");
var y=x.getElementsByTagName("p");
2、改变html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">Hello World!</p>
<img id="image" src="aaa.gif"> <script>
document.getElementById("p1").innerHTML="zhangsan";//改变了 <p> 元素的内容
document.getElementById("image").src="bbb.jpg"; //改变<img> 元素的 src 属性
</script>
</body>
</html>
#innerText
#innerHTML var obj = document.getElementById('p1')
obj.innerText # 获取文本内容
obj.innerText = "zhangsan" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>aaa</h1>" # 设置HTML内容
特殊的标签
input系列、textarea标签、select标签，用value获取值
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">Hello World!</p>
<input type="text" id="a1">
<input type="button" value="获取" onclick="get_text()"> <script>
function get_text(){
text=document.getElementById("a1");
alert(text.value);
}
</script>
</body>
</html>
3、事件
4、创建标签
(1)根据对象创建（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="crea"></div>
<input type="button" value="创建" onclick="create_a();"> <script type="text/javascript">
function create_a(){
var obj=document.createElement("a");//创建a标签
obj.href="http://www.baidu.com"; //添加href
obj.innerText="百度"; //添加文本 var crea=document.getElementById("crea");
crea.appendChild(obj);
}
</script>
</body>
</html>
(2)根据字符串创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="crea"></div>
<input type="button" value="创建" onclick="create_a();"> <script type="text/javascript">
function create_a(){
var crea = document.getElementById('crea');
var obj = "<input type='text' />";
// 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
crea.insertAdjacentHTML("beforeBegin",obj);
}
</script>
</body>
</html>
5、标签属性
var obj = document.getElementById('crea');
#默认存在的属性
obj.id
obj.id = "nid" #修改
obj.className
obj.className="zhangsan" #修改
#自定义的属性
obj.setAttribute(name,value) #设置
obj.getAttribute(name) #获取
obj.removeAttribute(name) #移除
#style
obj.style.fontSize = "66px";
6、提交表单
#事件提交
document.geElementById('form').submit()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text">
<input type="submit" value="提交"> <!--submit提交--> <div onclick="submit();">提交</div> <!-- 事件提交-->
</form>
<script type="text/javascript">
function submit(){
document.getElementById("form1").submit();//事件提交
}
</script>
</body>
</html>
7、阻止默认行为
当标签存在默认行为和事件时，并且事件前加了return时，如 onclick="return sub_msg()" ，如果事件返回的是false，就会阻止标签的默认行为，返回true才
会执行默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="form1" action="https://www.sogou.com/web" method="get">
<input name="query" type="text">
<input type="submit" onclick="return sub_msg()" value="提交"> <!--submit提交-->
</form>
<script type="text/javascript">
function sub_msg(){
tt=document.getElementsByName("query")[0];
if(tt.value.trim()){
return true;
}else {
alert("请输入内容");
return false;
}
}
</script>
</body>
</html>
8、其他
#alert方法，弹出消息对话框 #confirm方法，显示"确定"、"取消"对话框，如果按了【确定】按钮，就返回true，否则就false
window.location.href #当前地址
window.location.reload() #刷新
window.location.href = "url" #跳转
定时器
#定时器
obj=setInterval("fun()",2000); #每2秒执行fun()函数
clearInterval(obj); #停止定时器 obj1=setTimeout("fun()",2000); #2秒后只执行一次
clearTimeout(obj1) #一次没执行时停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label id="label_id">欢迎张三莅临指导</label>
<script type="text/javascript">
setInterval("func()",1000);//每1秒执行一次函数 function func(){
var lable_1=document.getElementById("label_id");
var lable_text=lable_1.innerText;
var first_text=lable_text.charAt(0);
var sub_text=lable_text.substring(1,lable_text.length);
var result_text=sub_text+first_text;
lable_1.innerText=result_text;
}
</script>
</body>
</html>
Dom编程的更多相关文章
- JavaScript DOM 编程艺术 ---> JavaScript语法
二. JavaScript语法目录 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一点,第一种是将JavaScript代码放到文档<head ...
- web前端基础——初识HTML DOM编程
1 HTML DOM编程概述 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- 高性能javascript学习总结（2）--DOM编程
我们知道,对DOM的操作都是非常的耗性能的,那么为什么会耗性能呢? 文档对象模型(DOM)是一个独立于语言的,使用 XML和 HTML 文档操作的应用程序接口(API).在浏览器中,主要与 ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
- 高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）
写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...
- 高性能Javascript(2) DOM编程
第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
随机推荐
- PHP 全局变量 $_REQUEST 的分析
PHP 中的 $_REQUEST 变量是指 HTTP Request 变量. $_REQUEST 变量中包含哪些值,需要根据 php.ini 中的 request_order 设置,我测试的环境是 P ...
- cocostudio做出来的界面如何进行分辨率适配，兼论cocos2dx3的多分辨率适配机制，以及retina适配机制
cocos有很多代码实际上都不再使用了,看代码时反而误导了程序员. 比如一个简单的分辨率适配,我查到了setContentSize,然后调用setContentSize,毫无用处啊!于是乎,我到处查资 ...
- 高性能Server---Reactor模型
原文地址:http://www.ivaneye.com/2016/07/23/iomodel.html 无处不在的C/S架构 在这个充斥着云的时代,我们使用的软件可以说99%都是C/S架构的! 你发邮 ...
- Sharepoint client model 中出现Cannot invoke HTTP DAV request. There is a pending query 的解决办法
由于近期在某项目中使用sharepoint client 对象模型做项目 在sharepoint 2010环境下正常,但迁移到sharepoint 2013后报错,提示如下 Cannot invoke ...
- H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
- Wrestling Match---hdu5971(2016CCPC大连 染色法判断是否是二分图)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5971 题意:有n个人,编号为1-n, 已知X个人是good,Y个人是bad,m场比赛,每场比赛都有一个 ...
- Android开发环境配置
由于公司项目需要,最近转做Android开发,这里我来介绍一下Android开发环境的配置过程. 首先,需要下载所需要的软件工具,如下所示: 1.Java:开发基础环境,JDK和JRE这两个都要下载的 ...
- 给div加上背景图片
<div class="panel-body" style="background:url('pages/upload/brief/img/bg.jpg');bac ...
- 也谈微信小程序
小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不关心是否安装太 ...
- 点餐系统sprint3总结
转眼间,sprint3也结束了.意味着软件工程的课程结束了,我们的项目也完成了.在队友们的认真学习,专注打码,辛苦赶工后,我们的项目完成了.显然是仓促中完成的,没有完美的界面.没有无bug的项目,但是 ...