获取和设置属性

DOM实在是个好东西，掌握了它我们不仅可以在JavaScript中使用，其它程序语言我们同样可以使用。

接下来就一起使用DOM来干些实事吧！

1.getAttribute

getAttribute是一个函数，它只有一个参数———就是我们要查询的属性的名字。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.   <title>Test</title>
  6.   <style></style>
  7. </head>
  8. <body>
  9.   <p id="para" title="It's just a test !" >A example paragraph !</p>
  10.   <script language="javascript">
  11.      var para=document.getElementById("para")//利用getElementById获取id为para的元素
  12.      var title=para.getAttribute("title");//获取title 属性
  13.      alert(title);//弹出对话框 It's just a test !
  14.   </script>
  15. </body>
  16. </html>

截图：



说明：getAttribute函数只能得到属性却无法修改属性，如果我们要修改属性还得靠它：

2.setAttribute

和getAttribute一样，setAttribute只能用于元素节点，setAttribute函数有两个参数，第一个是我们要修改的元素属性，第二个是我们要修改的内容，示例如下：

  1.      var para=document.getElementById("para")//利用getElementById获取id为para的元素
  2.      var title=para.setAttribute("title","Change title !");//修改title属性
  3.      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. 作业三（代码规范、代码复审、PSP）

    1.代码规范: 我支持代码要有规范,理由如下. (1).艺术是一个很带有个人风格的学科,天马行空才能凸显出自己的价值.但不要忘了,会艺术的不是生下来就会艺术, 他也需要按照前辈的步骤一步一步的学习基础 ...

  2. [.net 面向对象编程基础] (13) 面向对象三大特性——多态

    [.net 面向对象编程基础] (13) 面向对象三大特性——多态 前面两节,我们了解了面向对象的的封装和继承特性,面向对象还有一大特性就是多态.比起前面的封装和继承,多态这个概念不是那么好理解.我们 ...

  3. 十进制数转化成二进制后包含一的数量（c++）

    #include <iostream> using namespace std;int func(int x){    int count=0;    while(x){          ...

  4. 网络异步编程（C#）团购课

    新生命开发团队大石头讲解网络异步编程(C#) 内容:网络编程基础.IOCP.APM.SAEA 时长:2~3小时 价格:20元,20人及以上成团,http://item.taobao.com/item. ...

  5. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  6. 大叔也说Xamarin~Android篇~支付宝SDK的错误与解决

    回到目录 在为android程序引入支付宝后,可能没有那么顺利,有能出现各种各样的问题,大叔在引用支付宝后就出现了APL64的错误,在网上找不很多资料都不对正,还是在官网找到了几句话,说到了点子上,具 ...

  7. Atitit 发帖机系列（6） USRQBN2201 setup spec安装程序的实现规范与标准化解决方案

    Atitit 发帖机系列(6) USRQBN2201 setup spec安装程序的实现规范与标准化解决方案 安装主要解决一个问题,就是resin的内容启动路径以及端口..这里是使用的端口8077 主 ...

  8. Atitit 图像清晰度 模糊度 检测 识别 评价算法 原理

    Atitit 图像清晰度 模糊度 检测 识别 评价算法 原理 1.1. 图像边缘一般都是通过对图像进行梯度运算来实现的1 1.2. Remark: 1 1.3.  1.失焦检测. 衡量画面模糊的主要方 ...

  9. Linux初学 - 文件夹及文件操作

    创建文件夹 mkdir 移动文件夹 mv dir1 dir2 复制文件夹 cp 删除文件夹 rm 创建文件 touch 编辑文件内容 vi /vim 查看文件内容 cat 追加文件内容 echo 复制 ...

  10. iOS开发——高级技术&广告服务

    广告服务 上 面也提到做iOS开发另一收益来源就是广告,在iOS上有很多广告服务可以集成,使用比较多的就是苹果的iAd.谷歌的Admob,下面简单演示一下如何 使用iAd来集成广告.使用iAd集成广告 ...