DOM编程 学习笔记(二)
学习内容:
1.document对象
2.event对象
该对象将标记型文档进行封装
该对象的作用,是对可标记型文档进行操作
常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节点,就必须先获取节点所属的文档对象document
获取节点的方法体现:
getElementById();提高标签的id属性值获取该标签节点,返回该标签节点
getElementsByName();通过标签的name属性获取节点,返回的是一个数组/容器
getElementsTagName();通过标签名获取节点,因为标签名会有重复,所以返回一个数组
在操作文档时为了获取某一个特定的元素,getelementById方法是最好的选择...
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)//修改h1所显示的标题...
}
</script>
</head>
<body> <h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p> </body>
</html>
当我们在执行多次的getelementById方法时,我们可以定义一个方法,使其返回getelementById方法,这样可以避免
在每次调用的时候,都书写其方法,解决了代码冗余...
function id(x) {
if (typeof x == "string") return document.getElementById(x);
return x;
}
getElementByName()与getelementById方法相似,但是他查询的是name,而不是id属性...
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head> <body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个?" />
</body> </html>
getElementsByTagName() 返回一个指定标签的集合...
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body> <input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" /> </body>
</html>
可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。例如,下面的代码可获取文档中所有的表:
var tables = document.getElementsByTagName("table");
alert ("This document contains " + tables.length + " tables");
也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
<script type="text/javascript"> function getNodeByTagNameDemo2(){
var divNode = document.getElementById("newlink");
var nodes = divNode.getElementsByTagName("a");//nodes成为了一个数组,存放着多个a属性...
for(var i = 0;i<nodes.length;i++){
nodes[i].target="_blank";
}
}
</script>
<input type="button" value="document对象获取节点" onclick="getNodeByTagNameDemo2()"/> <a href="http://www.baidu.com">百度1</a>
<a href="http://www.baidu.com">百度2</a> <div id="newlink">
<a href="http://www.163.com">1631</a>
<a href="http://www.163.com">1632</a>
<a href="http://www.163.com">1633</a>
</div>
2.event对象..
事件绑定:
第一种方式
<html>
<head>
<script type="text/javascript">
function text(){
window.alert("hello");
}
</script>
</head>
<body>
<input type="button" value="直接绑定方式" onclick="test()"/>
</body>
</html>
第二种方式:
通过getelementById方法获取元素后再监听绑定
<html>
<head> <script language=”javascript”
Function test()
{
Document.write("hello");
}
</script>
</head>
<body>
<input type=”button” id=”ID名称” value=”刷新界面”/>
<script>
Document.getElementById(“ID名称”).onClick=test;//只能绑定在这,绑定在前面会报错。。。
</script>
</body>
</html>
DOM编程 学习笔记(二)的更多相关文章
- HTML DOM(学习笔记二)
嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...
- DOM编程 学习笔记(一)
PS:虽然自己JS基本语法算是掌握了,但是其实在JS掌握的只是远远还不够,网页上有太多好看的动态效果都是用JS 做出来的,自己也就仅仅会那么一两个动态的效果,学的只是皮毛...等有空的时候一定要好好的 ...
- linux shell编程学习笔记(二) --- grep命令
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...
- FFmpeg编程学习笔记二:音频重採样
ffmpeg实现音频重採样的核心函数swr_convert功能很强大,但是ffmpeg文档对它的凝视太过简单.在应用中往往会出这样那样的问题,事实上在读取数据->重採样->编码数据的循环中 ...
- 【Linux_Shell 脚本编程学习笔记二、打印菜单】
综合实例: 打印选择菜单,一键安装Web服务 [root@zuoyan script]# sh menu.sh 1.[install lamp] 2. [install lnmp] 3. [ex ...
- 多线程编程学习笔记——async和await(二)
接上文 多线程编程学习笔记——async和await(一) 三. 对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...
- 学习笔记(二)--->《Java 8编程官方参考教程(第9版).pdf》:第七章到九章学习笔记
注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- 多线程编程学习笔记——async和await(一)
接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...
随机推荐
- Dockerfile最佳实践(一)
1.使用缓存 Dockerfile的每条指令都会将结果提交为新的镜像,下一跳指令将会基于上一步指令的镜像的基础上构建,如果一个镜像存在相同的父镜像和指令(除了ADD),Docker将会使用镜像而不是 ...
- SQL SERVER树形结构数据——批量删除分组数据
定义函数获取某结点下所有子结点: CREATE FUNCTION [dbo].[fn_GetSubGroupInfoById] ( @id AS INT --某分组Id ) RETURNS @SubG ...
- perl的匿名引用
perl中列表不能嵌套,只能通过引用的方式构建复杂的结构.引用其实就是c中的指针,只不过perl中对指针,也就是一个地址的声明和取值有自己的一套方法. 1.先复习普通标量的引用方法: [vagrant ...
- SDL2中文教程
SDL2.0 Tutorial Index 原文地址:SDL 2.0 Tutorial Index Welcome! 下面的教程旨在为你提供一个SDL2.0以及c++中游戏设计和相关概念的介绍.在本教 ...
- python(25):Unicode 转成中文
代码转换如下: if __name__ == "__main__": data = "\u5c71\u5cb3\u548c\u4e00\u5207\u4e18\u9675 ...
- dubbo注册zookeeper保错原因
我的zookeeper是安装在本地,用的默认端口2181,版本3.4.10.dubbo版本2.5.8.dubbo-demo-provider.xml配置文件修改为:<dubbo:registry ...
- Navicat Premium 链接 ORACLE
http://www.oracle.com/technetwork/database/features/instant-client/index-097480.html 下载地址 Navicat Pr ...
- RTX——第17章 定时器组
以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 RTX 支持的定时器组,或者叫软件定时器,或者叫用户定时器均可.软件定时器的功能比较简 ...
- 配置信息写入到.ini文件中的方法
在我们写的程序当中,总有一些配置信息需要保存下来,以便完成程序的功能,最简单的办法就是将这些信息写入INI文件中,程序初始化时再读入.具体应用如下: 一.将信息写入.INI文件中 1.所用的WINAP ...
- 5种漂亮的纯CSS3动画按钮特效
这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...