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获取页面元素的常用方法的更多相关文章

  1. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  2. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  3. Javascript获取页面元素相对和绝对位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  4. JavaScript 获取页面元素

    一.根据 id 获取元素 语法格式: document.getElementById(id); Demo: var main = document.getElementById('main'); co ...

  5. JavaScript获取页面元素方法

  6. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  7. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  8. 用getBoundingClientRect()来获取页面元素的位置

    以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...

  9. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. nginx多层反向代理获取客户端真实ip

    访问路径: 用户 --> www.chinasoft.cn(nginx反向代理) --> www.chinasoft.com(nginx反向代理) --> python服务端程序 经 ...

  2. java获取当前路径的方法

    1.System.getProperty("user.dir") 函数获取当前路径 // 获取当前路径方式1 System.out.println(System.getProper ...

  3. 【428】Dijkstra 算法

    算法思想:(单源最短路径) 1个点到所有其他点的最短路径 查找顶点到其他顶点的最短路径,无法到达的记为+∞,找到最小的,就找到了最短路径的顶点 查看上一轮找到的最小点到达其他点的最小值,找到最短路径的 ...

  4. Spring Cloud 如何使用Eureka注册服务 4.2.2

    要使用Eureka实现服务发现,需要项目中包含Eureka的服务端发现组件以及客户端发现组件. 搭建Maven父工程 创建一个Maven父工程xcservice-springcloud,并在工程的po ...

  5. 从零开始封装React UI 组件库并发布到NPM

    github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package ...

  6. 关于css清除元素浮动的方法总结（overflow clear floatfix）

    在前两天的一个面试中考官问我web中清除浮动的一些css常用方法,我很轻松的答出了: 1.overflow:hidden 2.clear:both 3.floatfix类 然后问题就来了,考官接着问' ...

  7. APP排查内存泄漏最简单和直观的方法

        内存泄漏无疑会严重影响用户体验,一些本应该废弃的资源和对象无法被释放,导致手机内存的浪费,app使用的卡顿,那么如何排查内存泄漏呢? 当然,首先我们有google的官方文档可以参考,大部分博客 ...

  8. networkx详细教程

    写在前面:城市计算研究中经常涉及到图论的相关知识,而且常常面对某些术语时,根本不知道在说什么.最近接触了NetworkX这个graph处理工具,发现这个工具已经解决绝大部分的图论问题(也许只是我自己认 ...

  9. dotnet core JWT Demo

    JWT介绍 JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案.JWT的官网地址:https://jwt.io/. 通俗地来讲,JWT是能代表用户身份的令牌,可以使用JWT令牌在 ...

  10. 传输json数据到前台的时候，数据中包含日期数据

    问题描述 当从数据库中查询的数据中包含有日期格式的数据的时候,数据传输到前台会报错. 解决方式 // 逐条将日期进行格式化后再传输 Date date = new SimpleDateFormat(& ...