JavaScipt选取文档元素的方法(推荐)

摘自JavaScript权威指南（jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素，然后根据样式选择器对所有DOM元素进行筛选）

选取文档元素的方法：

1、通过ID选取元素（getElementById）

1）使用方法：document.getElementById("domId")
        其中，domId为要选取元素的id属性值

2）兼容性：低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的，并且会返回匹配name属性的元素。

2、通过名称name选取元素（getElementsByName）

1）使用方法：document.getElementsByName("domName")
        其中，domName为要选取元素的name属性值

2）说明：

a. 返回值是一个nodeList集合（区别于Array）

b. 和ID属性不一样，name属性只在少数DOM元素中有效（form表单、表单元素、iframe、img）。这是因为name属性是为了方便提交表单数据而打造的。

c. 为form、img、iframe、applet、embed、object元素设置name属性时，会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象

3）兼容性：IE中ID属性值匹配的元素也会一起返回

3、通过标签名选取元素（getElementsByTagName）

1）使用方法：document.getElementsByTagName("tagName")

其中，element是有效的DOM元素（包括document）
                 tagName是DOM元素的标签名

如：var aInput = document.getElementsByTagName("input");

　　　　　var aName = aInput[0];

　　　　　var pwd = aInput[1];

　　　　   var cfm = aInput[2];

2）说明：a. 返回值是一个nodeList集合（区别于Array）

b. 该方法只能选取调用该方法的元素的后代元素。

c. tagName不区分大小写

d. 当tagName为*时，表示选取所有元素（需遵从b.规则）

e. HTMLDocument会定义一些快捷属性来访问标签节点。如：document的images、forms、links属性指向<img>、<form>、<a>标签元素集合，而document.body和document.head总是指向body和head标签（当未显示声明head标签时，浏览器也会创建document.head属性）

4、通过CSS类选取元素（getElementsByClassName）

1）使用方法：element.getElementsByClassName("classNames")

其中，element是有效的DOM元素（包括document）

classNames是CSS类名称的组合（多个类名之间用空格，可以是多个空格隔开），

如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素（样式名称不区分先后顺序）

2）说明：

a. 返回值是一个nodeList集合（区别于Array）

b. 该方法只能选取调用该方法的元素的后代元素。

3）兼容性：IE8及其以下版本的浏览器未实现getElementsByClassName方法

5、通过CSS选择器选取元素

1）使用方法：document.querySelectorAll("selector")

其中，selector为合法的CSS选择器

2）说明：a. 返回值是一个nodeList集合（区别于Array）

3）兼容性：IE8及其以下版本的浏览器只支持CSS2标准的选择器语法

以上这篇JavaScipt选取文档元素的方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中使用DOM来控制HTML元素

    JS中使用DOM来控制HTML元素

    1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 例: <p name="pn">hello</p> <p name="pn">hello</p> <p name="pn">hello</p> <script> function getName(){ var count=docume

  • js删除Array数组中指定元素的两种方法

    本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

  • javascript与jquery动态创建html元素示例

    本文实例讲述了javascript与jquery动态创建html元素的方法.分享给大家供大家参考,具体如下: 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2",

  • JS从数组中随机取出几个数组元素的方法

    JS如何从一个数组中随机取出一个元素或者几个元素. 假如数组为 var items = ['1','2','4','5','6','7','8','9','10']; 1.从数组items中随机取出一个元素 var item = items[Math.floor(Math.random()*items.length)]; 2.从前面的一篇随机数组中随机取几个元素 function getRandomArrayElements(arr, count) { var shuffled = arr.sl

  • js删除数组元素、清空数组的简单方法(必看)

    一.清空数组 var ary = [1,2,3,4]; ary.splice(0,ary.length);//清空数组 console.log(ary); // 输出 [],空数组,即被清空了 二.删除数组元素 var ary = [1,2,3,4]; ary.splice(0,1); 或 ary.splice($.inArray(2, ary), 1); 其中$.inArray(2, ary)用来查找某元素在数组中的索引位置. 三,js 删除数组几种方法 var arr=['a','b','c

  • js 动态给元素添加、移除事件的实现方法

    最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio

  • js实现动态创建的元素绑定事件

    新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("cancelable"); 以上这篇js实现动态创建的元素绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • javaScript给元素添加多个class的简单实现

    javaScript给元素添加多个class的简单实现 <html> <head> <style type="text/css"> .div2{ font-size:16px; color:orange; } .div3{ font-size:20px; color:blue; } <style> <script type="text/javascript"> [1]直接把样式赋值给className va

  • JavaScipt选取文档元素的方法(推荐)

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现

  • dom4j创建和解析xml文档的实现方法

    dom4j创建和解析xml文档的实现方法

    DOM4J解析 特征: 1.JDOM的一种智能分支,它合并了许多超出基本XML文档表示的功能. 2.它使用接口和抽象基本类方法. 3.具有性能优异.灵活性好.功能强大和极端易用的特点. 4.是一个开放源码的文件 jar包:dom4j-1.6.1.jar 创建 book.xml: package com.example.xml.dom4j; import java.io.FileWriter; import org.dom4j.Document; import org.dom4j.Document

  • C#对XmlHelper帮助类操作Xml文档的通用方法汇总

    前言 该篇文章主要总结的是自己平时工作中使用频率比较高的Xml文档操作的一些常用方法和收集网上写的比较好的一些通用Xml文档操作的方法(主要包括Xml序列化和反序列化,Xml文件读取,Xml文档节点内容增删改的一些通过方法).当然可能还有很多方法会漏了,假如各位同学好的方法可以在文末留言,我会统一收集起来. C#XML基础入门 https://www.jb51.net/article/104113.htm Xml反序列化为对象 #region Xml反序列化为对象 /// <summary>

  • java中循环遍历删除List和Set集合中元素的方法(推荐)

    今天在做项目时,需要删除List和Set中的某些元素,当时使用边遍历,边删除的方法,却报了以下异常: ConcurrentModificationException 为了以后不忘记,使用烂笔头把它记录如下: 错误代码的写法,也就是报出上面异常的写法: Set<CheckWork> set = this.getUserDao().getAll(qf).get(0).getActionCheckWorks(); for(CheckWork checkWork : set){ if(checkWor

  • Java获取XML节点总结之读取XML文档节点的方法

    Java获取XML节点总结之读取XML文档节点的方法

    dom4j是Java的XML API,用来读写XML文件的.目前有很多场景中使用dom4j来读写xml的. 要使用dom4j开发,需要下载导入dom4j相应的jar文件. 官网下载:http://www.dom4j.org/dom4j-1.6.1/ github下载:http://dom4j.github.io/ 下载解压之后如图所示: 我们只需要把dom4j-1.6.1.jar文件构建到我们开发项目中就可以了. 下面就以Eclipse创建java项目的构建方法为例说明: 声明:本Java项目的

  • javaScript 读取和设置文档元素的样式属性

    首先我们先说一下样式表属性 1. 内联样式即元素style属性里面设置的,级别最高 2. 页面样式表定义即页面<style></style>里面定义的,级别次之 3.外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值:没有则返回空 IE和火狐皆然,只是有的属性值返回可能不一样,比如像颜色火狐返回rgb,而IE是返

  • 原生JS查找元素的方法(推荐)

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func

  • js获取元素下的第一级子元素的方法(推荐)

    js childnodes获取的是所有的子元素,而我们实际要获取第一级子元素. function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i].p

  • 通过php删除xml文档内容的方法

    本文实例讲述了通过php删除xml文档内容的方法.分享给大家供大家参考.具体实现方法如下: 第一种情况:删除一个student节点 复制代码 代码如下: <?php //1.创建一个DOMDocument对象.该对象就表示 xml文件 $xmldoc = new DOMDocument(); //2.加载xml文件(指定要解析哪个xml文件,此时dom树节点就会加载到内存中) $xmldoc->load("class.xml"); //3.删除一条学生student信息记录

  • 通过php添加xml文档内容的方法

    本文实例讲述了通过php添加xml文档内容的方法.分享给大家供大家参考.具体分析如下: 这里讲述的添加xml文档内容,从上一篇<DOM基础及php读取xml内容操作的方法>继续,代码如下: 复制代码 代码如下: <?php //1.创建一个DOMDocument对象.该对象就表示 xml文件 $xmldoc = new DOMDocument(); //2.加载xml文件(指定要解析哪个xml文件,此时dom树节点就会加载到内存中) $xmldoc->load("clas

随机推荐