获取和设置属性

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学习总结（二）的更多相关文章

  1. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  2. javascript DOM 学习总结 (1)

    摘自javascript DOM编程艺术 1.首先介绍DOM的三个字母的含义: 1.1  D 如果没有document(文档),DOM 也无从谈起,当创建了一个网页并把他加载到web浏览器中时,DOM ...

  3. JavaScript 基础学习（二）js 和 html 的结合方式

    第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...

  4. JavaScript 基础 学习 （二）

    JavaScript 基础 学习 节点属性 ​ 每一个节点都有自己的特点 ​ 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) ​ 语法:节点.nodeT ...

  5. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

  6. javascript基础学习（二）

    javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操 ...

  7. javascript正则表达式学习（二）--位置匹配

    文章首发于sau交流学习社区 一.前言 正则表达式是匹配模式,要么是匹配字符,要么匹配位置. 其实在开发中很少用到匹配位置,本篇文章主要包含: 二.什么是位置 位置:相邻字符之间的位置. 三.如何匹配 ...

  8. JavaScript的学习--生成二维码

    有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 ...

  9. HTML DOM学习之二

    1.HTML DOM属性: **innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用 <html> & ...

随机推荐

  1. vc编译 zlib 1.2.8

    最近用到gzip关的算法,于是想起了zlib这个库,于是将其下载下来编译. 首先,在官网上下载源码包:http://zlib.net/zlib-1.2.8.tar.gz 解压之后,打开vc 命令工具: ...

  2. 将SQL SERVER数据库改成MySql

    (www.helpqy.com) 架构在阿里云上,最先想采用SQL SERVER,想大家都是微软家族的嘛.但是发现SQL SERVER需要的配置比较高,需要的银子也比较多,最后在纠结之下换成了MySq ...

  3. [后端人员耍前端系列]KnockoutJs篇：快速掌握KnockoutJs

    一.引言 之前这个系列文章已经介绍Bootstrap.由于最近项目中,前端是Asp.net MVC + KnockoutJs + Bootstrap来做的.所以我又重新开始写这个系列.今天就让我们来看 ...

  4. Fluxion 实战答疑

    实战文章<实战-Fluxion与wifi热点伪造.钓鱼.中间人攻击.wifi破解>发布之后,大家响应热烈,不过也遇到了很多问题.微信后台被各种提问挤爆了,于是抓紧时间出了这篇答疑. 0x0 ...

  5. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. 使用IPostBackEventHandler让JavaScript“调用”回传事件

    在由ASP.NET所谓前台调用后台.后台调用前台想到HTTP——实践篇(二)通过自己模拟HTML标签事件与服务器交互,讲了ASP.NET的服务器控件是怎么render成HTML后市怎么“调用”后台方法 ...

  7. Android Activity的生命周期简单总结

    Android Activity的生命周期简单总结 这里的内容参考官方的文档,这篇文章的目的不是去总结Activity是如何启动,如何创造,以及暂停和销毁的,而是从实际开发中分析在Activity各个 ...

  8. show一下自己的文档编写功底

    以我为例,我绝对相信,“才华”和颜值成反比.这里我要秀一下我的文档编写能力.在我这十年的工作生涯里,的确有数不清的次数,我的同事或上司,对我设计和制作的文档表示称赞. 我曾记得,2010年我在好丽友— ...

  9. GOF设计模式特烦恼

    这段时间,学习状态比较一般,空闲时基本都在打游戏,和研究如何打好游戏,终于通过戏命师烬制霸LOL,玩笑了.为了和"学习"之间的友谊小船不翻,决定对以往学习过的GOF设计模式做一个简 ...

  10. Nodejs从有门道无门菜鸟起飞教程。

    这是一篇菜鸟教程,这是一篇菜鸟教程,如果你是菜鸟到话. 简单来说Nodejs并不是一门新的语言,但是它可以让我们的JS运行在服务器端,在服务器端写JS代码并且输入输出,也就是说以后要是有人问你JS是不 ...