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 ...
随机推荐
- 【RabbitMQ】Publish/Subscribe
Publish/Subscribe 在上一节我们创建了一个work queue.背后的设想为每个任务被分发给明确的消费者.这节内容我们将做一些完全不同的事情 -- 我们将发送一条消息给多个消费者.这种 ...
- hive 使用where条件报错 java.lang.NoSuchMethodError: org.apache.hadoop.hive.ql.ppd.ExprWalkerInfo.getConvertedNode
hadoop 版本 2.6.0 hive版本 1.1.1 错误: java.lang.NoSuchMethodError: org.apache.hadoop.hive.ql.ppd.ExprWalk ...
- 每天php函数 - 数组最后一个元素取出
复制代码代码如下: $array=array(1,2,3,4,5); echo $array[count($array)-1];//计算数组长度,然后获取数组最后一个元素,如果数组中最后一个元素 ...
- /etc/sudoers文件损坏修复
1. 重启(开机)时按Shift键(这时就会进入grub模式) 选择第二项 进入高级选项
- 转：Egret社区翻译的《TypeScript语言手册》
<TyptScript语言手册>第1章-介绍<TypeScript语言手册>第2章-基本概念<TypeScript语言手册>第3章-类型<TypeScri ...
- pt-archiver使用
pt-archiver工具其实就是用来清理,归档数据用的 一.归档前的准备需要配置client字符集为utf-8,如果你用了utf-8的编码,防止归档数据为乱码[client]default-char ...
- How repair disk issue when "Fsck Failed please repair manually and reboot"
" Fsck Failed please repair manually and reboot. the root filesystem is currently mounted as re ...
- centos7 mariadb
闲置已久的空间环境配置忘得差不多了,今天得空整理,重置了磁盘重新搭建环境,首先在CentOS 7.0安装MariaDB的数据库,在这里记录下安装过程,以便以后查看. 1.安装MariaDB 安装命令 ...
- AJAX发送参数到后台，前台火狐debug报undefine
后面经过查找:估计是数据并不是Json格式,由于var PATIENT_ID=getIdSelections();其中PATIENT_ID是数组,所以必须转成字符串. $('#table').on(' ...
- 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器
引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...