当网页被加载时，浏览器会创建页面的文档对象模型（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的更多相关文章

  1. 第十五章：Python の Web开发基础 (二) JavaScript与DOM

    本課主題 JavaScript 介绍 DOM 介绍 JavaScript 介绍 JavaScript 是一门编程语言,它可以让网页动起来的,JavaScript 的变量有两种,一个是局部变量:一个是全 ...

  2. javascript之DOM篇一

    一.什么是DOM DOM是用来操作页面,如div的获取,修改样式 二.DOM节点 标签(css)=元素(js)=节点(DOM) 1.子节点 childNodes 仅算父元素下的第一层 <!DOC ...

  3. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  4. 第一百一十六节，JavaScript，DOM操作样式

    JavaScript,DOM操作样式 一．操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...

  5. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  6. Python javascript操作DOM

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  7. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  8. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  9. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

随机推荐

  1. Linux vmstat使用

    Vmstat命令的简单使用 Vmstat命令是Linux/unix常用的系统监控工具,可以方便的查看CPU.内存.swap分区.IO读写等情况. Vmstat常用的参数主要有两个:1.采集的时间间隔 ...

  2. Google的Protobuf协议分析

    protobuf和thrift类似,也是一个序列化的协议实现,简称PB(下文出现的PB代表protobuf). Github:https://github.com/google/protobuf 上图 ...

  3. my97中文乱码问题

    在使用my97日期插件后页面显示中文乱码问题: 解决方法: 把下面这段代码复盖到你的ZH-CN.js就解决了 var $lang={ errAlertMsg: "\u4E0D\u5408\u ...

  4. session、cookie浅见

    万事开头难,刚开始不一定能写好博文,不,应该是一定写的不好,但我定会用心. 以前只知道session是存在服务器,cookie是存在客户端,至于它们工作的原理就不了解了.为了巩固自己记忆,小小的总结了 ...

  5. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  6. 使用ndk编译c可执行程序

    1.创建工程目录  在ubuntu系统下搭建好ndk编译环境,创建test目录 mkdir test 在test目录下创建jni目录 cd test mkdir jni 2.编写源代码 vim hel ...

  7. mysql 5.7 的安装配置与 navicat premium for mysql 11 的破解使用

    再安装mysql5.7 或以上的版本出现了一些问题,现在总结下,希望能给初入学习mysql的人一下帮助,大牛就不要来嘲笑小弟我了 首先准备如下: 1.下载mysql 5.7,下载地址:https:// ...

  8. JNDI

    这两天研究了一下 context.lookup("java:comp/env/XXX")和直接context.lookup("XXX")的区别 网上关于这两个的 ...

  9. python 装饰器

    #!/usr/bin/env python3 #-*-encoding:utf-8-*- def w3(*args, **kwargs): ') def w1(): def ww1(func): de ...

  10. eclipse maven maven-archetype-webapp 创建失败

    如果在eclipse中发现创建maven失败,大部分的原因是因为本地仓库坏了,或是少东西了,最直接的方法就时删掉重新下载就好了