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 ...
随机推荐
- redisTemplate的spring配置以及lua脚本驱动
最近在使用spring-data-redis的redisTemplate,所以写篇使用记录吧. 1.不用多说,使用maven引入相关依赖,因为项目已经引入其他的 <dependency> ...
- PhpStorm 10 破解方法
最新版PhpStorm 10正式版改进了PHP 7支持,改进代码完成功能. PhpStorm 是最好的PHP开发工具,使用它进行PHP开发将会让你感觉到编程的乐趣. 快乐无极终于从oschina看到了 ...
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- python2.7安装PIL.Image模块
这是大家常用的两种安装方法 sudo pip install PIL pip install PIL --allow-external PIL --allow-unverified PIL 如果安装成 ...
- ESXi 5.5开启并配置SNMP
1. 安装vshpere cli 2.设定SNMP通讯字并开启SNMP功能 进入到bin目录. C:\Program Files (x86)\VMware\VMware vSphere CLI\bin ...
- MXNET安装过程中遇到libinfo导入不了的问题解决
今天尝试安装windows版本的MXNET,在按照官网的运行了python的setup之后,import mxnet时出现如下错误:cannot import name libinfo,在网上查找发现 ...
- 使用HttpClient连接池进行https单双向验证
https单双向验证环境的搭建参见:http://www.cnblogs.com/YDDMAX/p/5368404.html 一.单向握手 示例程序: package com.ydd.study.he ...
- Linux最常用命令的小总结
目录及文件的基本操作: cd .. 切换到当前目录的上一级目录 cd 切换工作目录至当前用户的家目录 cd - 返回到上一个打开的目录(像遥控器上的切换键,切换到上一个播放的电视频道) ll -h ...
- SQL 随记
内连接 select e.empno as 员工编号, e.ename as 员工名字, d.dname as 部门名字from emp e inner join dept d on e.deptno ...
- windows下面配置apache+http
一.apache安装 下载并安装apache_2.2.9-win32-x86-openssl-0.9.8h-r2.msi(见附件),找到apache安装目录(C:\Program Files (x86 ...