使用getElementsByTagName()和namedItem()获取特定元素

getElementsByTagName接受一个参数，即要取得元素的标签名，返回值是包含零个或多个元素的NodeLIst。

注意：getElementsByTagName接受的标签名不区分大小写，除XML，XHTML之外

document对象还有一些特定方法，用来获取特殊的元素集合
比如：
document.images == document.getElementsByTagName(‘img’)
document.forms == document.getElementsByTagName(‘form’)
document.anchors：包含文档中所有带name特性的< a >元素
document.links：包含文档中所有带href特性的< a >元素
……

1.基本使用

假设HTML如下：

<img src="a.png" name="img"/>
<img src="a.png"/>

使用JS获取包含img的NodeList

var images = document.getElementsByTagName('img');
或者
var images = document.getElementsByTagName('IMG');
或者
var images = document.getElementsByTagName('Img');
......var images = document.images;//获取图片的的数量
console.log( images.length )        //2//获取第一个图片的的src
console.log( images[0].src )//获取第一个图片的的src
console.log( images.item(0).src )

2.namedItem()获取指定name属性的元素

如下，HTML中包含多个标签，

<img src="a.png" name="img"/>
<img src="a.png"/><select name="sel"><option value=""></option>
</select><select name="sel2"><option value=""></option>
</select>

需求：现在想获取name值为sel2的select标签:

方法1：使用namedItem()

var selects = document.getElementsByTagName('select');
var s = selects.namedItem('sel2');或者var selects = document.getElementsByTagName('*');
var s = selects.namedItem('sel2');

方法2：使用方括号[]

方括号[]中可以传递2种参数，数值型或者字符串型，如果传入的是数值索引，就会等同于调用item()，如果是字符串索引，就会等同于调用namedItem()，所以也可以像下面这么写：

var selects = document.getElementsByTagName('select');
var s = selects['sel2'];

3.namedItem()的注意事项

如果存在多个name值相同，namedItem()只会取得第一项。

<button name="submit">1</button>
<button name="submit">2</button>
<button name="submit">3</button>

var buttons = document.getElementsByTagName('button');
var btn = buttons.namedItem('submit');console.log(btn)        //<button name="submit">1</button>

使用getElementsByTagName()和namedItem()获取特定元素相关推荐

getElementsByTagName（）获取某些元素
使用getElementsByTagName()方法可以返回带有指定标签名的对象集合 doucument.getElementsByTagName("标签名"): 注意: 1.因为 ...
获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
获取dom元素的方法
在 JavaScript 中,获取 DOM 元素的方式有多种.下面列出了一些常用的方法: 1.用 document.getElementById() 方法:该方法需要传入一个参数,即要获取元素的 id ...
tensorflow 利用索引获取tensor特定元素
tensorflow 利用索引获取tensor特定元素_君莫笑-CSDN博客 Tensorflow常用函数笔记_Cyiano的博客-CSDN博客_tf.greater_equal tensorflow ...
python list查找元素下标,python 获取list特定元素下标的实例讲解
在平时开发过程中,经常遇到需要在数据中获取特定的元素的信息,如到达目的地最近的车站,橱窗里面最贵的物品等等.怎么办?看下面方法一:利用数组自身的特性 a.index(target), 其中a是你的目 ...
python取list的个别元素_python 获取list特定元素下标的实例讲解
python 获取list特定元素下标的实例讲解在平时开发过程中,经常遇到需要在数据中获取特定的元素的信息,如到达目的地最近的车站,橱窗里面最贵的物品等等.怎么办?看下面方法一:利用数组自身的特性 ...
html form提交前md5,javascript实现MD5加密-JavaScript获取HTML元素的三种方...-兼容IE与firefox的js回车提交表单_169IT.COM...
本文介绍JavaScript获取网页中HTML元素的三种方法,供大家学习参考. 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义 ...
如何获取HTML元素对应JavaScript对象？
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

使用getElementsByTagName()和namedItem()获取特定元素

使用getElementsByTagName()和namedItem()获取特定元素相关推荐

最新文章

热门文章