getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法:

document.getElementsByName(name)

与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。

注意:

1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

 <body>
<p name="pn">getElementsByName</p>
<p name="pn">getElementsByName</p>
<p name="pn">getElementsByName</p>
<p name="pn">getElementsByName</p>
<script>
var pn = document.getElementsByName("pn")[0].innerHTML = "new"
</script>
</body>

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称,如p、a、img等标签名。

2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

 <body>
<p>getElementsByTagName</p>
<p>getElementsByTagName</p>
<p>getElementsByTagName</p>
<p>getElementsByTagName</p>
<script>
var tagName = document.getElementsByTagName("p")[0].innerHTML = "new"
</script>
</body>

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")。

 <body>
<p id="pid" name="pn">tagname,id,name</p>
<script>
var tagName = document.getElementsByTagName("p")[0].innerHTML
var name = document.getElementsByName("pn")[0].innerHTML
var id = document.getElementById("pid").innerHTML
document.write(tagName+" "+name+" "+id)
</script>
</body>

  

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法:

elementNode.getAttribute(name)

说明:

1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

2. name:要想查询的元素节点的属性名字

 <body>
<a href="www.baidu.com" id="aid"></a>
<script>
var a = document.getElementById("aid")
var getattr = a.getAttribute("href")
alert(getattr)
</script>
</body>

setAttribute()方法

setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

语法:

elementNode.setAttribute(name,value)

说明:

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意:

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。

 <body>
<a href="www.baidu.com" id="aid"></a>
<script>
var a = document.getElementById("aid")
var setattr1 = a.setAttribute("href","www.google.com")
var getattr1 = a.getAttribute("href")
alert(getattr1)
var setattr2 = a.setAttribute("title","这是第二种设置属性节点")
var getattr2 = a.getAttribute("title")
alert(getattr2)
</script>
</body>

DOM对象控制HTML无素——详解1的更多相关文章

  1. DOM对象控制HTML无素——详解3

    创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...

  2. DOM对象控制HTML无素——详解2

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  3. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  4. Struts2使用Interceptor实现权限控制的应用实例详解

    Struts2使用Interceptor实现权限控制的应用实例详解 拦截器:是Struts2框架的核心,重点之重.因此,对于我们要向彻底学好Struts2.0.读源码和使用拦截器是必不可少的.少说了. ...

  5. C#依赖注入控制反转IOC实现详解

    原文:C#依赖注入控制反转IOC实现详解 IOC的基本概念是:不创建对象,但是描述创建它们的方式.在代码中不直接与对象和服务连接,但在配置文件中描述哪一个组件需要哪一项服务.容器负责将这些联系在一起. ...

  6. C#类、对象、方法和属性详解

    C#类.对象.方法和属性详解 一.相关概念: 1.对象:现实世界中的实体(世间万物皆对象) 2.类:具有相似属性和方法的对象的集合 3.面向对象程序设计的特点:封装 继承 多态 4.对象的三要素:属性 ...

  7. JS总结之二:DOM对象控制HTML

    DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...

  8. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  9. 18.C++-[ ]操作符使用 、函数对象与普通函数区别(详解)

    在上章17.C++-string字符串类(详解)学习了string类,发现可以通过[ ]重载操作符来访问每个字符. 比如: string s="SAD"; for(int i=0, ...

随机推荐

  1. xml学习篇(二) ----JSON 和XML对比

    在比较JSON和XML之前,我们先来上一堂关于数据格式的简要历史(更准确的说,是关于XML的始祖): 早在1970年,IBM开发了一种叫Generalized Markup Language的标记语言 ...

  2. 【设计模式 - 8】之组合模式(Composite)

    1      模式简介 组合模式可以将对象以树形结构来表现"整体/部分"层次结构,让客户以一致的方式处理个别形象以及对象组合. 组合模式让我们能用树形方式创建对象的结构,树里面包含 ...

  3. java对象数组的概述和使用

    1 public class Student 2 { 3 // 成员变量 4 private String name; 5 private int age; 6 7 // 构造方法 8 public ...

  4. Google Web Toolkit (GWT)怎么制作多个用户界面

    Google Web Toolkit即GWT是目前基于AJAX技术开发的一个比较成功的框架包,但是其附带例程中只有单页面的实例,那么应该怎么样制作多个页面呢? 其实很简单,GWT的一个模块,就是一个页 ...

  5. Linux下对后台进程通过kill传递信号不起作用的问题

    在阅读APUE信号一章时,我遇到Linux下对后台进程通过kill传递信号不起作用的问题 具体情形与如下链接中的老兄一致: http://bbs.csdn.net/topics/390335913?p ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(48)-工作流设计-起草新申请 系列目录 创建新表单之后,我们就可以起草申请了,申请按照严格的表单步骤和分 ...

  7. [RxJS] Filtering operators: distinct and distinctUntilChanged

    Operator distinct() and its variants are an important type of Filtering operator. This lessons shows ...

  8. Android 仿网易新闻v3.5:上下滑动的引导页

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在很多天气或者新闻的应用中,我们都能看到一些字幕滚动的效果,最简单的实现为跑马灯效果,用系统提供的属性即可实现. 复杂一些的就需要自己去用自定义控 ...

  9. Web性能优化系列

    web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...

  10. Google代码实验室

    https://code.google.com/p/google-styleguide/