JavaScript DOM学习总结(二)
获取和设置属性
DOM实在是个好东西,掌握了它我们不仅可以在JavaScript中使用,其它程序语言我们同样可以使用。
接下来就一起使用DOM来干些实事吧!
1.getAttribute
getAttribute是一个函数,它只有一个参数———就是我们要查询的属性的名字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style></style>
</head>
<body>
<p id="para" title="It's just a test !" >A example paragraph !</p>
<script language="javascript">
var para=document.getElementById("para")//利用getElementById获取id为para的元素
var title=para.getAttribute("title");//获取title 属性
alert(title);//弹出对话框 It's just a test !
</script>
</body>
</html>
截图:
说明:getAttribute函数只能得到属性却无法修改属性,如果我们要修改属性还得靠它:
2.setAttribute
和getAttribute一样,setAttribute只能用于元素节点,setAttribute函数有两个参数,第一个是我们要修改的元素属性,第二个是我们要修改的内容,示例如下:
var para=document.getElementById("para")//利用getElementById获取id为para的元素
var title=para.setAttribute("title","Change title !");//修改title属性
alert(para.title);//弹出Change title
截图:
当然DOM的属性和方法不仅仅是只有这几个,如nodeName,nodeValue,childNodes,nextSibling等,这里就举这几个人例子。
Happy hacking !
JavaScript DOM学习总结(二)的更多相关文章
- JavaScript正则表达式学习笔记(二) - 打怪升级
本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...
- javascript DOM 学习总结 (1)
摘自javascript DOM编程艺术 1.首先介绍DOM的三个字母的含义: 1.1 D 如果没有document(文档),DOM 也无从谈起,当创建了一个网页并把他加载到web浏览器中时,DOM ...
- JavaScript 基础学习(二)js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- JavaScript 基础 学习 (二)
JavaScript 基础 学习 节点属性 每一个节点都有自己的特点 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法:节点.nodeT ...
- JavaScript DOM学习总结(一)
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
- javascript基础学习(二)
javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操 ...
- javascript正则表达式学习(二)--位置匹配
文章首发于sau交流学习社区 一.前言 正则表达式是匹配模式,要么是匹配字符,要么匹配位置. 其实在开发中很少用到匹配位置,本篇文章主要包含: 二.什么是位置 位置:相邻字符之间的位置. 三.如何匹配 ...
- JavaScript的学习--生成二维码
有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...
- HTML DOM学习之二
1.HTML DOM属性: **innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用 <html> & ...
随机推荐
- UWP滑动后退
经过近些年智能手机App的不断发展,用户已经不仅仅满足于功能上的需求.UI.设计等非功能点逐渐在App体验中占了大多数的分数.不知从何时起,滑动手势就成为了App的一个标配.他不仅仅是一个功能,更是一 ...
- 使用aggregate在MongoDB中查找重复的数据记录
我们知道,MongoDB属于文档型数据库,其存储的文档类型都是JSON对象.正是由于这一特性,我们在Node.js中会经常使用MongoDB进行数据的存取.但由于Node.js是异步执行的,这就导致我 ...
- osgi 2
基础的API BundleActivator BundleContext ServiceReference HelloServiceFactory ServiceTracker osgi 疑惑: I ...
- Redis的使用模式之计数器模式实例
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/123.html?1455853785 Redis 是目前 NoSQL 领域 ...
- EF架构~为EF DbContext生成的实体添加注释(T5模板应用)
回到目录 相关文章系列 第八回 EF架构~将数据库注释添加导入到模型实体类中 第二十一回 EF架构~为EF DbContext生成的实体添加注释(T4模板应用) 第二十二回EF架构~为EF DbCo ...
- Java线程:线程的交互
一.线程交互的基础知识 SCJP所要求的线程交互知识点需要从java.lang.Object的类的三个方法来学习: void notify() 唤醒在此对象监视器上等 ...
- 过滤器中的chain.doFilter(request,response)
Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml文件配置好要 ...
- webpack配置es6开发环境
webpack.config.js var path = require('path'); module.exports = { entry: "./es6/demo01.js", ...
- 分享.NET系统开发过程中积累的扩展方法
.NET 3.5提供的扩展方法特性,可以在不修改原类型代码的情况下扩展它的功能.下面分享的这些扩展方法大部分来自于Code Project或是Stackoverflow,.NET为此还有一个专门提供扩 ...
- Topology Shapes of OpenCascade BRep
Topology Shapes of OpenCascade BRep eryar@163.com 摘要Abstract:通过对OpenCascade中的BRep数据的读写,理解边界表示法的概念及实现 ...