Javascript 获取文档元素

一、getElementById()

  参数:id 属性,必须唯一。

  返回:元素本身。若 id 不唯一,则返回第一个匹配的元素。

  定义的位置:仅 document(即:除 document 之外的元素调用该方法,会报 is not a function)。

  

二、getElementsByName()

  参数:name 属性,不必唯一。

  返回:NodeList 对象。

  定义的位置:仅 document。

 

彩蛋:对于 <form>、<img>、<ifram>当且仅当为上述元素设置 name 属性的时候,Window 对象会自动创建一个对应的属性,并可通过 document.name 来获取。若 name 仅匹配上一个元素,则返回元素本身,若匹配上多个元素,则返回 HTMLCollection 对象

三、document.getElementsByTagName()

  参数:1、HTML 元素,不必唯一,不区分大小写。

     2、* , 匹配所有元素。

  返回:HTMLCollection 对象。

  定义的位置:document 和 element(即:可以在任意元素下调用该方法,获取指定元素的后代元素)。

  

  彩蛋:对于 <form>、<img>、<a>,可通过 document.forms/.images/.links 来获取元素,返回 HTMLCollection 对象。并包含通过 name/id 索引的方法

    

四、getElementsByClassName()

  参数:1、字符串参数,不必唯一。

     2、若需多个 className 匹配,使用空格分隔每个 class 。

     3、若文档开头对<!DOCTYPE>声明选择的是‘怪异模式’渲染,则 className 不区分大小写,若选择的是‘严格模式’渲染,则需区分大小写。

  返回:HTMLCollection 对象。

  定义的位置:document 和 element。

  

五、querySelectorAll()

  参数:css 选择器的字符串参数(ID:#、class:.、tag:div、属性:p[name=x]、文档结构:ul>li:first-child、获取多个元素:div, #log)。

  返回:1、返回选择器匹配的所有元素的 NodeList 对象。

     2、没有匹配的元素,返回 空的 NodeList 对象。

     3、选择器字符串非法,抛出异常。

  定义的位置:document 和 element。

  

  彩蛋:JQuery 库中 css 选择器使用了一个与 querySelectorAll() 等效的方法,命名为 $()

六、querySelector()

  参数:css 选择器的字符串参数(ID:#、class:.、tag:div、属性:p[name=x]、文档结构:ul>li:first-child、获取多个元素:div, #log)。

  返回:1、返回选择器匹配的第一个元素本身。

     2、没有匹配的元素,返回 null。

  定义的位置:document 和 element。

  

原文地址:https://www.cnblogs.com/dyqblog/p/10251749.html

时间: 2024-07-29 19:28:26

Javascript 获取文档元素的相关文章

js获取文档元素

我们通常对一个html的元素进行操作,那么怎么获取html元素呢?通常有一下几个方法: 1.通过ID选取元素 var element=document.getElementById("idName"); 2.通过名字选取 var radios=document.getElementsByName("favaColor"); 3.通过标签名获取元素 var menu = document.getElementById("menu"); var el

javascript选取文档元素

用指定的id属性 用指定的name属性 用指定的标签名字 用指定的CSS类 匹配指定的CSS选择器 通过ID选取元素 var section1 = document.getElementById("section1") 注意:在低于IE8版本的浏览器中,getElementById()对匹配元素的ID不区分大小写,而且也返回匹配name属性的元素. 通过名字选取元素 和id不一样的是name属性只在少数HTML元素中有效,包括表单.表单元素.<iframe>.<img

javascript 获取文档/屏幕的Width||Height

document.body.clientWidth //网页可见区域宽度document.body.clientHeight //网页可见区域高度document.body.offsetWidth //网页可见区域包括边线的宽度document.body.offsetHeight //网页空间区域包括边线的高度document.body.scrollWeight //网页正文全文宽度document.body.scrollHeight //网页正文全文高度document.body.scroll

JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setInterval()用来实现一个在指定毫毛数的时间里重复调用,返回一个值,这               个值可以传递给clearInterval()用于取消后续函数的调用. ③Document对象的location属性也引用到Location对象: window.location === docume

JavaScript获取和创建元素

1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById()  =>通过元素ID获取文档中特定的元素,如获取 id = "button1" 的按钮 可以写成: var btn = document.getElementById("button1"); 2) document.getElementByTagName() =>获取特定标签的元素集合(返回为 NodeList 结果),因

JavaScipt选取文档元素的方法

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

JavaScript : DOM文档解析详解

JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> Don’t forget to buy this stuff.</p> 节点及其类型 元素节点: 属性节点:元素的属性,可以直接通过属性的方式来操作 文本节点:元素节点的子节点,其内容通常为文本 2.Node接口的特性和方法 现在给出一个演示的HTML文件: html <!doctype h

利用js_API 执行对html文档元素的属性的CRUD操作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对html元素属性的增删改查操作</title> <style> #attr{text-align:center;font-size:24px;color:white;background:#008000;width:400px;height:30px; } .myclass{back

Javascript 在线文档

http://jquery.com/    jQuery http://jqueryui.com/  jQuery UI http://plugins.jquery.com/caret/    输入框文字选择与光标位置处理 http://www.examplet.org/jquery/caret.php  示例代码 http://requirejs.org      require.js http://angularjs.org/   Google 推出的SPA( single-page-app