getElementsByName()方法

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

语法:

document.getElementsByName(name)

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

注意:

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

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

看看下面的代码:

运行结果:

getElementsByTagName()方法

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

语法:

getElementsByTagName(Tagname)

说明:

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

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

看看下面代码,通过getElementsByTagName()获取节点。

区别getElementByID,getElementsByName,getElementsByTagName

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

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

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

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

把上面的例子转换到HTML中,如下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

方法总结如下:

注意:方法区分大小写

通过下面的例子(6个name="hobby"的复选项,两个按钮)来区分三种方法的不同:

  <input type="checkbox" name="hobby" id="hobby1">  音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全选" id="button1">
<input type="button" value = "全不选" id="button1">

1. document.getElementsByTagName("input"),结果为获取所有标签为input的元素,共8个。

2. document.getElementsByName("hobby"),结果为获取属性name="hobby"的元素,共6个。

3. document.getElementById("hobby6"),结果为获取属性id="hobby6"的元素,只有一个,"跑步"这个复选项。

getAttribute()方法

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

语法:

elementNode.getAttribute(name)

说明:

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

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

看看下面的代码,获取h1标签的属性值:

运行结果:

h1标签的ID :alink
h1标签的title :getAttribute()获取标签的属值

setAttribute()方法

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

语法:

elementNode.setAttribute(name,value)

说明:

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

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

注意:

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

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

JavaScript--DOM方法的更多相关文章

  1. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript DOM实战:创建和克隆元素

    DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...

  3. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  4. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  5. javascript插入before(),after()新DOM方法

    随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...

  6. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  7. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  8. 《JavaScript+DOM编程艺术》的摘要(二)---DOM中的几个方法

    //DOM: //对象是一种独立的数据集合,与某个特定对象相关联的变量被称为这个对象的属性,通过某个特定对象可以为之调用的函数被称为这个对象的方法 // //4个非常实用的DOM方法: //检索特定元 ...

  9. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  10. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

随机推荐

  1. DRF JWT的用法 & Django的自定义认证类 & DRF 缓存

    JWT 相关信息可参考: https://www.jianshu.com/p/576dbf44b2ae DRF JWT 的使用方法: 1. 安装 DRF JWT # pip install djang ...

  2. 前端开发:CSS3

    CSS介绍: CSS能够使页面具有美观一致的效果,并且能够让内容与格式分离,利于扩展 所以,CSS解决了下面两个问题: 1. 将HTML页面的内容与格式分离: 2. 提高web开发的工作效率. CSS ...

  3. 详解SpringBoot 添加对JSP的支持(附常见坑点)

    序言: SpringBoot默认不支持JSP,如果想在项目中使用,需要进行相关初始化工作.为了方便大家更好的开发,本案例可直接作为JSP开发的脚手架工程 SpringBoot+War+JSP . 常见 ...

  4. HDU 2222 (AC自动机)

    HDU 2222 Keywords search Problem : 给若干个模式串,询问目标串中出现了多少个模式串. Solution : 复习了一下AC自动机.需要注意AC自动机中的fail,和n ...

  5. Linux下汇编语言学习笔记40 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  6. codevs——1275 有鱼的声音

    1275 有鱼的声音 2012年CCC加拿大高中生信息学奥赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解  查看运行结果     题目描述 Des ...

  7. Ubuntu 16.04 GNOME添加桌面图标/在桌面上显示图标

    GNOME默认不能在桌面上创建文件夹,但是可以通过工具设置:用gnome-tweak-tool设置Nautilus接管桌面即可. 安装: sudo apt-get install gnome-twea ...

  8. MongoDB小结21 - find【游标】

    数据库使用游标来控制find的执行结果. 客户端对游标的实现通常能够对最终结果进行有效控制. 可以限制结果的数量,略过部分结果,对任意方向任意键的组合对结果进行排序,或者去执行一些功能强大的操作. 我 ...

  9. openstack setup demo 前言

    我们搭建一套三节点的openstanck集群.一个controller节点,两个compute节点.操作系统采用Centos7,操作系统版本信息如下. [root@controller01 ~]# c ...

  10. CTO是有门槛的 我眼中真正优秀CTO应具备五大素质

    最近几个月,不断有人找我推荐CTO人选,这两年互联网创业和创投实在是太火爆了,全民创业,创业项目井喷,一下子发现CTO不够用了,全行业缺CTO,到处都在找CTO.说实话,我自己也没有CTO存货,CTO ...