getElementById将返回一个与那个有着给定id属性值的元素节点对应的对象。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
alert(typeof document.getElementById("purchase"));
</script>
</body>
</html>

getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一组元素。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
for(var i=0;i<document.getElementsByTagName("li").length;i++){
alert(typeof document.getElementsByTagName("li")[i]);
}
</script>
</body>
</html>

getElementsByClassName( HTML5) ,只接受一个参数,也就是类名,返回一个具有相同类名的元素的数组

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
alert(document.getElementsByClassName("sale important").length);
</script>
</body>
</html>

getAttribute是一个函数,通过一个参数的名字的追加,可以获得此参数的值   而与之对应的setAttribute可以通过两个参数来设立需要被赋值的参数的名字和值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
if(title_text){
paras[i].setAttribute("title","brand new title text");
alert(paras[i].getAttribute("title"));
}
}
</script>
</body>
</html>

javascript中五种常见的DOM方法的更多相关文章

  1. JavaScript中五种常见运算符

    一. in运算符 in运算符希望它的左操作数是一个字符串或可以转换为字符串,希望它的右操作数是一个对象.如果右侧的对象拥有一个名为左操作数值的属性名,那么表达式返回true.例如: var point ...

  2. javascript中五种基本数据类型

    前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...

  3. JavaScript 中 4 种常见的内存泄露陷阱

    了解 JavaScript 的内存泄露和解决方式! 在这篇文章中我们将要探索客户端 JavaScript 代码中常见的一些内存泄漏的情况,并且学习如何使用 Chrome 的开发工具来发现他们.读一读吧 ...

  4. php中五种常见的设计模式

    设计模式 一书将设计模式引入软件社区,该书的作者是 Erich Gamma.Richard Helm.Ralph Johnson 和 John Vlissides Design(俗称 “四人帮”).所 ...

  5. Java中8种常见的排序方法

    排序方法的演示1)插入排序(直接插入排序.希尔排序)2)交换排序(冒泡排序.快速排序)3)选择排序(直接选择排序.堆排序)4)归并排序5)分配排序(基数排序)所需辅助空间最多:归并排序所需辅助空间最少 ...

  6. javascript中五种迭代方法实例

    温习一下js中的迭代方法. <script type="text/javascript"> var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]; ...

  7. JavaScript中几种常见的兼容问题及解决方案

    在js中好用的东西一般都存在兼容问题,以下,我整理了一些常用的兼容处理方法,自己用的时候可以把他们放在一个JS文件中,需要用到时候直接引入,会比较方便. 一.获取非行内样式 function getS ...

  8. ASP.NET,C#后台调用前台javascript的五种方法

    C#后台调用前台javascript的五种方法 由于项目需要,用到其他项目组用VC开发的组件,在web后台代码无法访问这个组件,所以只好通过后台调用前台的javascript,从而操作这个组件.在网上 ...

  9. 自然语言处理的CNN模型中几种常见的池化方法

    自然语言处理的CNN模型中几种常见的池化方法 本文是在[1]的基础上进行的二次归纳. 0x00 池化(pooling)的作用   首先,回顾一下NLP中基本的CNN模型的卷积和池化的大致原理[2].f ...

随机推荐

  1. Android Thread和AsyncTask

    1. 线程Thread 2. 异步任务AsyncTask ------------------------------------------------- --------------------- ...

  2. 快速构建Windows 8风格应用11-语义缩放

    原文:快速构建Windows 8风格应用11-语义缩放 本篇博文主要介绍为什么需要语义缩放.什么是语义缩放.如何构建语义缩放. 为什么需要语义缩放 如果用过Windows 8系统的开发者都知道在Win ...

  3. spring的@Transactional注解详细用法

    概述 事务管理对于企业应用来说是至关重要的,即使出现异常情况,它也可以保证数据的一致性.Spring Framework对事务管理提供了一致的抽象,其特点如下: 为不同的事务API提供一致的编程模型, ...

  4. Java多线程推荐使用的停止方法和暂停方法

    判断线程结束和让线程结束 package cn.lonecloud.Thread.study; /** * 用于循环1000次的线程 * @Title: Run1000Thread.java * @P ...

  5. (翻译)W3C的Turtle文档

    主要翻译如下页面,https://www.w3.org/TR/turtle/,对该页面中Turtle的内容部分进行翻译,希望对使用Turtle的朋友们有所帮助. 1 简介 2 Turtle语言 2.1 ...

  6. Linux 首先基本包安装(vim啊什么的),源,源优化,项目架构介绍, (LNMuWsgi)Django项目相关软件mysql,redies,python(相关模块)安装配置测试

    内容 补充: 查看已启动服务的端口 netstat -tulnp |grep (方式1) ss -tulnp|grep (方式2) 前期铺垫: . Linux要能上网 . 掌握Linux软件包安装方法 ...

  7. 函数--&gt;指定函数---&gt;默认函数---&gt;动态函数--&gt; 动态参数实现字符串格式化--&gt;lambda表达式,简单函数的表示

    #一个函数何以接受多个参数#无参数#show(): ---> 执行:show() #传入一个参数 def show(arg): print(arg) #执行 show(123) #传入两个参数 ...

  8. 谷歌开源的一个BTREE实现 Go语言

    // Copyright 2014 Google Inc. // // Licensed under the Apache License, Version 2.0 (the "Licens ...

  9. Gimbal Lock

    [Gimbal Lock] 万向锁源于欧拉角的是有序处理的.U3D中的序列为: y->x->z.当旋转y时,local坐标系与世界坐标系重合,所以y等于永远按惯性坐标旋转.当x旋转+/-9 ...

  10. Java基础——String类(一)

    一.String 类代表字符串 Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 字符串是常量:它们的值在创建之后不能更改.字符串缓冲区支持可变的字符串 ...