如何获取HTML元素所对应的javascript对象?

获取HTML元素所对应的javascript对象

一、getElementById()：返回对拥有指定 id 的第一个对象的引用，id是唯一的，因此返回是单个的

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div><div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div><input class="a"  type="checkbox" name="hobby" value="0" /> 足球<input type="checkbox" name="hobby" value="1" /> 乒乓球<input type="checkbox" name="hobby" value="2" /> 篮球<script>var element = document.getElementById("header");//获得id=header的标签的HTML元素console.log(element);</script></body>
</html>

运行结果：确实得到了id=header的标签的HTML元素

二、getElementsByTagName():返回带有指定标签名的对象集合

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div><div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div><input class="a"  type="checkbox" name="hobby" value="0" /> 足球<input type="checkbox" name="hobby" value="1" /> 乒乓球<input type="checkbox" name="hobby" value="2" /> 篮球<script>var elements = document.getElementsByTagName("div")//通过标签名获取HTML元素，是多个，因此elements是返回带有指定标签名的对象集合for(var i=0;i<elements.length;i++){console.log(elements[i]);}</script></body>
</html>

运行结果：确实得到了标签名为div的HTML元素

三、getElementByName():返回带有指定名称的对象集合，可以用来获取单选框和复选框HTML元素

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div><div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div><input class="a"  type="checkbox" name="hobby" value="0" /> 足球<input type="checkbox" name="hobby" value="1" /> 乒乓球<input type="checkbox" name="hobby" value="2" /> 篮球<script>var elements = document.getElementsByName("hobby")for(var i=0;i<elements.length;i++){console.log(elements[i]);}</script></body>
</html>

运行结果：得到了所有name=hobby的元素

四、getElementByClassName():返回带有指定class的对象集合

实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div><div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div><input class="a"  type="checkbox" name="hobby" value="0" /> 足球<input type="checkbox" name="hobby" value="1" /> 乒乓球<input type="checkbox" name="hobby" value="2" /> 篮球<script>var elements = document.getElementsByClassName("a")for(var i=0;i<elements.length;i++){console.log(elements[i]);}</script></body>
</html>

运行结果

如何获取HTML元素所对应的javascript对象?相关推荐

js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...
html 获取页面元素高度,浅谈JavaScript获取元素的大小（高度和宽度）的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
JQuery对象与JavaScript对象的区别与转换
JQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是" ...
如何获取HTML元素对应JavaScript对象？
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小首先,要明确两个基本概念. 一张网页的 ...
JavaScript 获取一元素的所有子元素
JavaScript 获取一元素的所有子元素现有一表格,代码如下: < table border =1 cellpadding =0 cellspacing =0 width =300 ...
【JavaScript】获取网页元素
特殊元素: 分别获取body和html,全局仅有一个,比较特殊.格式固定,元素名可以自己另外起 var bodyElement=document.body var htmlElemnt=documen ...
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...

如何获取HTML元素所对应的javascript对象?

获取HTML元素所对应的javascript对象

如何获取HTML元素所对应的javascript对象?相关推荐

最新文章

热门文章