获取和设置属性

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. C#/net 使用Protocol Buffers入门

    Protocol buffers 是一个由谷歌开发的开源的编码机制用于将结构化的数据序列化或者反序列化,被设计成语言以及平台中立,protobuff比xml更简单比json还要紧凑一些,网上有一些关于 ...

  2. MySql学习（MariaDb）

    资料 http://www.cnblogs.com/lyhabc/p/3691555.html http://www.cnblogs.com/lyhabc/p/3691555.html MariaDb ...

  3. Request中的各种方法

    前言 Request中方法众多,对于Java Web程序员来说,种种方法都会在工作中常常用到.Request由于不是JDK的一部分,这些方法的用法也没有专门的API可以查,所以在工作中遇到Reques ...

  4. 详解c#迭代器

    迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素 ...

  5. 作业2.3 Github注册过程

    过程: 1.百度搜索Github,并且进入官网.2.打开发现是全英文网页,网页右上角找到sgin up,单击进入. 3.输入用户名.邮箱.密码,完成后单击下面绿色图标. 4.之后发现进入选择价格界面, ...

  6. 1、CC2541蓝牙4.0芯片中级教程——基于OSAL操作系统的运行流程了解+定时器和串口例程了解

    本文根据一周CC2541笔记汇总得来—— 适合概览和知识快速索引—— 全部链接: 中级教程-OSAL操作系统\OSAL操作系统-实验01 OSAL初探 [插入]SourceInsight-工程建立方法 ...

  7. js模版引擎handlebars.js实用教程——each-基本循环使用方法

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

  8. Ubuntu 下配置Ganglia监控

    Ganglia是比较知名的开源监控系统, 运维上需要关注的一些通用的状态都有所涉及.其组成主要是gmond(监控程序),gmetad(信息收集程序),web(监控数据展现app).ubuntu的apt ...

  9. java.util.Properties

    1 Properties文件中分隔符及空格的处理 因为 Properties 继承于 Hashtable,所以可对 Properties 对象应用 put 和 putAll 方法.但强烈反对使用这两个 ...

  10. lua的io操作文档

    2014-09-16~15:26:35 I/O库提供两种不同的方式进行文件处理1.io表调用方式:使用io表,io.open将返回指定文件的描述,并且所有的操作将围绕这个文件描述 io表同样提供三种预 ...