DOM查找元素

1. 查找元素5种:

1. 按id查找1个元素对象:
var elem=document.getElementById("id值");
何时使用:1. 元素必须有id
2. 精确查找某一个元素
2. 按标签名(TagName)查找多个元素:
var elems=element.getElementsByTagName("标签名");
返回值:HTMLCollection类型的对象——动态集合
如何获得一个元素对象:
elems[i]
elems["name值"]——元素必须有name属性
何时使用:查找父元素下统一标签名的一批子元素
优:屏蔽空字符节点的干扰
总结:向上爬:parentNode;
向下爬:getElementsByTagName
缺:不但找到直接子元素,还包括所有子代元素

购物车:
补:事件处理函数中的this,指代当前正在触发的对象

3. 按name属性查找:
var elem=document.getElementsByName("name值");
直观获得表单中元素的API:
document.forms-->当前网页中所有表单对象
var form=document.forms["id值"]
var chks=form["name值"]
如果只找到一个,返回一个对象
如果找到多个,返回HTMLCollection集合

4. 按class属性查找:HTML5 新
var elems=node.getElementsByClassName("class名");
返回动态集合

5. 按选择器查找:Selector API——JQuery核心
优点:1. 没有兼容性问题:
2. 原生API,执行效率高!
3. 返回值:包含全功能,全属性的元素对象集合
缺:极个别CSS3选择器,可能不支持
比如::not([])-->否定伪类

2个:
1. 仅返回1个匹配的元素:
var elem=element.querySelector("选择器");
何时使用:仅查找一个元素时
如果找不到,返回null
2. 返回所有选择器匹配的元素对象
var elems=element.querySelectorAll("选择器");
何时使用:查找多个元素时

佳悦(深圳)科技有限公司

美源自这里

微信:JaJoyYOJOY

微博:http://weibo.com/JaJoy

官网:http://www.galajoy.com/

联系&投稿:[email protected]

时间: 2024-08-02 07:03:36

DOM查找元素的相关文章

javascript dom查找元素常用方法

1.按id查找 document.getElementById(); 支持:所有主流浏览器 2.按标签名查找 document.getElementsByTagName();//标签名:Elements加了S,选出来是类数组: 支持:所有主流浏览器 3.按name属性查找 document.getElementsByName();//name属性,部分标签可以:Elements加了S,选出来是类数组: 支持:所有主流浏览器 4.按class属性查找 document.getElementsByC

jQuery 遍历 - 祖先:向上遍历 DOM 树,以查找元素的祖先

jQuery 遍历 - 祖先 祖先是父.祖父或曾祖父等等. 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先. 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() 方法 parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. 下面的例子返回每个 <span> 元素的直接父元素: 实例 $(document).

JavaScript之查找元素

在IE6还大行其道的时候,原生JS操作DOM有各种各样的问题,jQuery应运而生,它解决了人们的痛点,对各种浏览器及其各种版本的兼容是相当的赞,而且易上手(不包括jQuery2.0),但他毕竟是库,性能上面还是弱于原生的.如今许多公司已经放弃兼容IE6和7甚至8,所以原生JS操作DOM可以搬上台面了,尤其是原生在查找元素方面的扩展可以让你不在依赖jQuery,下面详说原生查找元素最基本的三个document.getElementById()接受一个参数:要取得的元素的ID,查找到则返回该元素,

&lt;&lt;&lt; Jquery查找元素、选择器使用方法总结

$("#myDiv"); //根据给定的ID匹配一个元素,用于搜索id 属性中给定的值,id属性必须是唯一的 $("div"); //根据给定的元素名匹配所有元素,搜索指向dom节点的标签名 $(".myClass"); //根据给定的类匹配元素,用以搜索的类.一个元素可以有多个类,只要有一个符合就能被匹配到 $("div,.myClass"); //将每一个选择器匹配到的元素合并后一起返回,可以指定多个元素 返回示例: &l

【Jsoup的学习礼记】使用选择器语法来查找元素

问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.select(String selector) 方法实现: File input = new File("/tmp/input.html"); Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/"); Ele

jsoup使用选择器语法来查找元素

问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.select(String selector) 方法实现: File input = new File("/tmp/input.html"); Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/"); Ele

使用选择器语法来查找元素

问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.select(String selector) 方法实现: File input = new File("/tmp/input.html"); Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/"); Ele

js:面向对象,Document对象:查找元素对象,修改元素,事件

面向对象编程 面向对象的编程,那么是更符合人类所接触的世界的逻辑思维. 将一个系统划分为各个子系统,子系统又由各个模块构成,将每个模块,系统划分为一个个对象,给这些对象赋予某些角色(属性/功能/方法). 伪面向对象编程语言 ---> 面向对象编程语言 1.创建对象的方式 (1) 字面量的方式 //字面量的形式 var student = { name:"蔡徐坤", type:"练习生", like:"唱跳rap篮球", rap:functi

随机色&原生DOM筛选元素

function colorRandom1(){ var r = Math.floor(Math.random()*51+200); var g = Math.floor(Math.random()*51+200); var b = Math.floor(Math.random()*51+200); return 'rgb('+r+','+g+','+b+')'; } var div = document.body.getElementsByTagName('div')[0]; div.styl