JS中获取元素的第二种方法

1.静态方法

　　var oUl = document.getElementById('');

2.动态方法

　　document.getElementsByTagName('');

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <script>
 7 /*
 8 #list {}        var oUl = document.getElementById('list');                            静态方法
 9
10 li {}                    document.getElementsByTagName('li');                                    动态方法
11 #list li {} var aLi = oUl.getElementsByTagName('li');
12                             // aLi => [ li, li, li ]     元素的集合
13                             aLi.length                                3
14                             aLi[0]
15                             // 在用 TagNasme 的时候，必须要加上：[]
16 */
17 window.onload = function (){
18     //    var oUl = document.getElementById('list');
19     var oUl = document.getElementsByTagName('ul')[0];
20     var aLi = oUl.getElementsByTagName('li');
21
22     // document.getElementsByTagName('li');
23
24     // alert( aLi.length );
25 };
26 </script>
27 </head>
28
29 <body>
30
31 <ul id="list">
32     <li></li>
33     <li></li>
34     <li></li>
35 </ul>
36
37 <ol>
38     <li></li>
39     <li></li>
40 </ol>
41
42 </body>
43 </html>

示例代码

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6
 7 <script>
 8 window.onload = function (){
 9     // document.title = 123;
10     // document.body.innerHTML = 'abc';
11     var aBtn = document.getElementsByTagName('input');
12
13     // alert(aBtn.length);
14
15     document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />';
16
17     // alert(aBtn.length);
18     aBtn[0].onclick = function (){ alert(1); };
19     aBtn[1].onclick = function (){ alert(1); };
20     aBtn[2].onclick = function (){ alert(1); };
21
22     // 重复执行某些代码
23     // 每次执行的时候，有个数字在变化
24 };
25 </script>
26
27 </head>
28
29 <body>
30 </body>
31 </html>

小练习题

转载于:https://www.cnblogs.com/123wyy123wyy/p/6901547.html

JS中获取元素的第二种方法相关推荐

【javascript基础——系列10】js中隐藏元素的几种方法以及代码
系列文章 [javascript基础--系列1]前端页面ajax连接后台服务器传输数据 [javascript基础--系列2]前端页面axios连接后台服务器传输数据 [javascript基础--系 ...
js获取元素的五种方法
在使用Javascript的过程中我们经常都需要获取元素 ,接下来就给大家介绍一下我知道的在js中获取元素的五种方法. 1.根据选择器查找元素 1.1 document.querySelector( ...
php 从数组里删除元素,PHP从数组中删除元素的四种方法实例
PHP从数组中删除元素的四种方法实例一.总结一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...
Spring 中获取 request 的几种方法，及其线程安全性分析
概述在使用Spring MVC开发Web系统时,经常需要在处理请求时使用request对象,比如获取客户端ip地址.请求的url.header中的属性(如cookie.授权信息).body中的数据等 ...
高级 | Java中获取类名的3种方法
转载自高级 | Java中获取类名的3种方法获取类名的方法 Java 中获取类名的方式主要有以下三种. getName() 返回的是虚拟机里面的class的类名表现形式. getCanonical ...
PHP中获取星期的几种方法
PHP中获取星期的几种方法 PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0是星 ...
android获取颜色资源,Android中获取颜色的几种方法
Android中获取颜色的几种方法: 通过android封装好的Color类中的常量 public static final int BLACK = 0xFF000000; public static ...
js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js中获取元素的当前位置
js中获取当前位置有如下几种方法: event.offsetX, (IE属性,测试都可以使用) event.offsetY, (IE属性,测试都可以使用) event.clientX, e ...

JS中获取元素的第二种方法

JS中获取元素的第二种方法相关推荐

最新文章

热门文章