获取和设置属性

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. GitHub详解（GitHub for Windows）

    GitHub详解 GitHub 是一个共享虚拟主机服务,用于存放使用Git版本控制的软件代码和内容项目.它由GitHub公司(曾称Logical Awesome)的开发者Chris Wanstrath ...

  2. PSP

    PSP2.1 Time(%) Planning 10 l Estimate 10 Development 90 l Analysis 10 l Design Spec 5 l Design Revie ...

  3. 优雅的使用python之环境管理

    优雅的使用python之环境管理 缘起 情景1:不同python版本的管理 同一电脑上的多个python版本之前的管理,为了突出问题的普遍存在,下面是有人在segmentfault上提的问题. 摘自: ...

  4. 依据BOM和已经存在的文件生成其他种类的文件

    在BOM中记录中有物料编码,物料名称,物料规格等,而且依据BOM已经生成了一些的文件,如采购规格书,这个时候需要生成相应的检验规格书模板,可以使用下面的VBA代码,具体代码如下: Function I ...

  5. ASP.NET MVC 随想录——开始使用ASP.NET Identity，初级篇

    在之前的文章中,我为大家介绍了OWIN和Katana,有了对它们的基本了解后,才能更好的去学习ASP.NET Identity,因为它已经对OWIN 有了良好的集成. 在这篇文章中,我主要关注ASP. ...

  6. Mac配置Qt环境——Could not resolve SDK path for 'macosx10.8'

    前言:解决在Mac端安装Qt后,出现的Could not resolve SDK path for 'macosx10.8'的配置信息. 首先,发现问题之前,先搜索一下.但是搜索的结果都是说,找到配置 ...

  7. C#高级一

    1.单例模式:又叫单件模式,属于创建型模式分类.实际上讲,一个对象只允许创建一个实例,并且提供了一个全局的访问点.  (静态方法生命周期长,消亡时间短,GC不回收) ================= ...

  8. Java使用snakeyaml解析yaml

    YAML Yaml是一种"是一个可读性高并且容易被人类阅读,容易和脚本语言交互,用来表达资料序列的编程语言."类似于XML但比XML更简洁,语法详见 http://www.ruan ...

  9. 暂停JS的深入学习

    对于JS的掌握程度,已经满足中级前端工程师的需要了,现在需要入门一下后端的基础知识,如nginx服务器一类的知识,方便今后快速开发. 先来nginx,文章.

  10. 我心中的核心组件（可插拔的AOP）~第十三回 实现AOP的拦截组件Unity.Interception

    回到目录 说在前 本节主要说一下Unity家族里的拦截组件,对于方法拦截有很多组件提供,基本上每个Ioc组件都有对它的实现,如autofac,它主要用在orchard项目里,而castle也有以拦截的 ...