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 ...
随机推荐
- IntelliJ IDEA使用小技巧
1:设置类,接口,枚举注解模板 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NA ...
- 腾讯QQ认证空间4月27日已全面开放申请，欲进军自媒体
今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...
- [转]10个有关RESTful API良好设计的最佳实践
Web API已经在最近几年变成重要的话题,一个干净的API设计对于后端系统是非常重要的. 通常我们为Web API使用RESTful设计,REST概念分离了API结构和逻辑资源,通过Http方法GE ...
- ThinkCmfX模板常量
一.public文件: 1.各种js文件,包括cookie.js.ajaxFrom.js等系统自带的js文件 2.simpleboot:bootstrap.图标font文件 二.themes:前端模板 ...
- 关于flex中正则表达式上下文匹配的问题
按照课本与网上的说法,斜杠'/'表示匹配上下文,例如ab/cd表示当ab后面有cd时匹配ab 然而如果实际这么写,flex在调用该正则表达式时触发'unrecognized rule' flex源代码 ...
- web app 自适应方案总结 关键字 弹性布局之rem
关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/defin ...
- CSS之伪元素
1. :first-line 向元素的首行文本添加样式,不必关心首行是元素节点还是文本节点 <style> body,htm,div,p{ margin:0; padding:0; } d ...
- mac终端显示和隐藏隐藏文件的命令
defaults write com.apple.finder AppleShowAllFiles -bool true; killall Finder //显示隐藏文件 defaults write ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.0 版新增查询引擎管理
欲了解V3.0版本的相关内容可查看下面的链接地址. RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.0 版本发布 RDIFramework.NET — 基于.NET的快速信 ...
- MySQL查询出错提示 --secure-file-priv解决方法
原文 在某台DB上准备运行一个SQL语句,就是用SELECT INTO OUTFILE把查询结果写入到文件的时候提示以下信息: The MySQL server is running with the ...