获取和设置属性

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. 前端神器avalonJS入门（二）

    本章开始搭配requireJS来使用avalon,开始之前,我们可以对avalon进行精简改造(注:新版的avalon已提供了shim版本,无需再做如下的精简了,直接点这里获取). avalon源码里 ...

  2. 分享一个异步任务在遇到IO异常时支持递归回调的辅助方法

    public void TryAsyncActionRecursively<TAsyncResult>( string asyncActionName, Func<Task<T ...

  3. Sensor（ACCELEROMETER）

    package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...

  4. CSS：谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  5. Linux文件系统应用---系统数据备份和迁移（用户角度）

    1   前言 首先承诺:对于从Windows系统迁移过来的用户,困扰大家的  “Linux系统下是否可以把系统文件和用户文件分开到C盘和D盘中” 的问题也可以得到完满解决. 之前的文章对Linux的文 ...

  6. 【T-SQL基础】03.子查询

    以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 ...

  7. python property

    python property 在2.6版本中,添加了一种新的类成员函数的访问方式--property. 原型 class property([fget[, fset[, fdel[, doc]]]] ...

  8. [51单片机] 以PWM控制直流电机为例建一个简单的51工程框架

    目录 1)功能概述 2)引脚连接 3)框架介绍 4)模块说明 5)复用规则 6)工程链接 1)功能概述 名称:独立按键控制直流电机调速 内容:对应的电机接口需用杜邦线连接到uln2003电机控制端; ...

  9. 我心中的核心组件（可插拔的AOP）~分布式文件上传组件~基于FastDFS

    回到目录 一些概念 在大叔框架里总觉得缺点什么,在最近的项目开发中,终于知道缺什么了,分布式文件存储组件,就是缺它,呵呵,对于分布式文件存储来说,业界比较公认的是FastDFS组件,它自己本身就是集群 ...

  10. Ghost博客安装

    Ghost博客是一个基于Node.js 的开源博客平台,由前WordPress UI 部门主管John O'Nolan 和WordPress 高级工程师Hannah Wolfe 创立,目的是为了给用户 ...