JavaScript

超轻量级php框架startmvc

JavaScript获取页面元素的常用方法详解

更新时间:2020-09-16 09:36:01 作者:startmvc
1、通过标签获取元素,返回一个数组  varli=document.getElementsByTagName('li');//标签获取元素 

1、通过标签获取元素,返回一个数组


  var li = document.getElementsByTagName('li');//标签获取元素
  li[0].innerHTML;// 查看获取元素的内容
  li[0].innerHTML = "content";//修改获取到标签中的内容

2、通过id获取页面元素


  var header = document.getElementById("header");//id获取元素

3、通过class名字获取页面元素


  var list = document.getElementsByClassName('list');//返回一个数组,通过下标访问文本

4、通过CSS选择符方式获取页面元素


  //querySelector:返回符合条件的第一个
  var str = document.querySelector('li');
  var str1 = document.querySelectorAll('li');//全部返回,每个li都是一个对象

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>JavaScript获取页面的常用方法</title>
 <script>
 // 1、通过标签获取元素,返回一个数组
 var li = document.getElementsByTagName('li');
 
 //2、通过id获取页面元素
 var header = document.getElementById("header");

 // 3、通过class名字获取页面元素
 var list = document.getElementsByClassName('list');//返回一个数组,通过下标访问文本

 // 4、通过CSS选择符方式获取页面元素
 //querySelector:返回符合条件的第一个
 var str = document.querySelector('li');
 // querySelectorAll:返回符合条件的每一个
 var str1 = document.querySelectorAll('li');
 </script>
</head>
<body>
 <p id="header">JavaScript学习</p>
 <ul class="list">
 <li>HTML</li>
 <li>jQuery</li>
 <li>JavaScript</li>
 </ul>
 <ul class="list">
 <li>HTML</li>
 <li>jQuery</li>
 <li>JavaScript</li>
 </ul>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

javascript 获取页面元素 方法