JavaScript(二) DOM
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
通过 id 查找 HTML 元素:getElementById 这里大小写敏感,而且不像VS报错提示性能那么好,所以写JavaScript成功后有些许的成就感..
如果您需要操作某个特定的元素，使用 getElementById() 方法:
getElementById 是在一个标签或者一个范围内,根据标签名选择,如果要选择第3个 input 那么 var t=getElementById("input")[2].
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input")[];
alert(x.value);
}
</script>
</head>
<body> <input name="myInput" type="text" size="" /><br />
<input name="myInput" type="text" size="" /><br />
<input name="myInput" type="text" size="" /><br />
<input type="button" onClick="getElements()"
value="How many input elements?" /> </body>
</html>
docunment.getElementById("id")；根据id找，最多找一个
var a =docunment.getElementById("id");
docunment.getElementByName("name")；根据name找，找出来的是数组
docunment.getElementByTagName("name")；根据标签名找，找出来的是数组
docunment.getElementByClassName("name") 根据classname找，找出来的是数组
既然是数组,那么要选某一个就在后面加[] 从0开始 例:docunment.getElementByName("name")[5] 意思是根据name找出来的第6个.
______________________________________________华丽丽的分割线______________________________________________
对事件作出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript onclick事件
也可以这样
onclick事件:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击该文本</h1>
</body>
鼠标悬停:
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="呵呵"
}
function mOut(obj)
{
obj.innerHTML="来点我"
}
</script>
</body>
Onchange事件:
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</body>
JavaScript(二) DOM的更多相关文章
- 第十五章：Python の Web开发基础 (二) JavaScript与DOM
本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...
- javascript之DOM篇一
一.什么是DOM DOM是用来操作页面,如div的获取,修改样式 二.DOM节点 标签(css)=元素(js)=节点(DOM) 1.子节点 childNodes 仅算父元素下的第一层 <!DOC ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- 第一百一十六节，JavaScript，DOM操作样式
JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Python javascript操作DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- JavaScript之DOM对象的获取
之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...
随机推荐
- php使用openssl进行Rsa长数据加密(117)解密(128) 和 DES 加密解密
PHP使用openssl进行Rsa加密,如果要加密的明文太长则会出错,解决方法:加密的时候117个字符加密一次,然后把所有的密文拼接成一个密文:解密的时候需要128个字符解密一下,然后拼接成数据. 加 ...
- 计算机维修之操作系统的安装（windows、Mac、Linux）
从大学开始接触了更多的计算机知识,我就在开荒一样,慢慢的接触多了,就想着安装操作系统一定要学会. 前前后后呢,我折腾过很多操作系统,在我的笔记本上存在过Windows.黑苹果.Linux.安卓等操作系 ...
- 求两圆相交部分面积（C++)
已知两圆圆心坐标和半径,求相交部分面积: #include <iostream> using namespace std; #include<cmath> #include&l ...
- MySQL 权限与安全
一.MySQL权限系统通过两个阶段进行认证: (A) 对用户进行身份认证,IP地址和用户名联合, (B) 对合法用户赋予相应权限,权限表在数据库启动的时候载入内存中. 二.在权限的存取过程中,会用到& ...
- 在Centos中部署redis运行状态图形化监控工具 — RedisLive
写在前面 前两天看到张善友老师的一篇文章<先定个小目标, 使用C# 开发的千万级应用>,里面给出了一张腾讯OA基础服务中redis运行情况的一张监控图,然后想到自己的项目中前不久也上了re ...
- grep
http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2856896.html
- 小波包分解 仿真 matlab
clc;close all;clear;fs = 100000;t = 1: 100;x = sin(2*pi*4000* t/fs) + sin(2*pi*40000*t/fs); %db8[Lo_ ...
- Win10搭建Linux开发环境之网络连接设定
一直想在家自己搭建一个LINUX服务器,好在上面安装个ORACLE数据库玩玩. 上次用了Ubuntu,结果ORACLE没装成功,现在换个思路,采用CentOS 7作为Linux服务器, 之后再进行构建 ...
- IntelliJ IDEA WEB项目的部署配置
以下内容是我网上找的比较全面了,其中关于facets配置很多地方都没有说明,其实很重要,我加入了自己的理解.其他来自网络.在导入一个项目有问题时,建议先创建一个正确的web项目,然后对比配置项,一般就 ...
- [转]加速Android Studio/Gradle构建
加速Android Studio/Gradle构建 android android studio gradle 已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多, ...