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. python中的修饰符@的作用

    1.一层修饰符 1)简单版,编译即实现 在一个函数上面添加修饰符 @另一个函数名 的作用是将这个修饰符下面的函数作为该修饰符函数的参数传入,作用可以有比如你想要在函数前面添加记录时间的代码,这样每个函 ...

  2. Win10+Ubuntu18.04安装双系统

    一:相关资料 (一)Win10+Ubuntu18.04 亲测UEFI启动模式双硬盘+双系统成功安装经验(文章) (二)如何安装Linux与windows双系统?(视频) 推荐先看视频,之后按照文章进行 ...

  3. Python - Django - ORM 不常用字段

    BigAutoField(AutoField): bigint 自增列,必须填入参数 primary_key=True 如果没有写自增列,则会自动创建一个列名为 id 的列 SmallIntegerF ...

  4. 实现Modbus TCP多网段客户端应用

    对于Modbus TCP来说与Modbus RTU和Modbus ASCII有比较大的区别,因为它是运行于以太网链路之上,是运行于TCP/IP协议之上的一种应用层协议.在协议栈的前两个版本中,Modb ...

  5. 工具中修改设置Default VM Arguments

    转自:https://www.cnblogs.com/zouhao/p/6513177.html

  6. SQL优化——select

    MYSQL优化实施方案:https://www.cnblogs.com/clsn/p/8214048.html 对查询时经常用到的字段建立索引,如包含多个也可以构建复合索引,建立索引之后需要注意的一点 ...

  7. SpringCloud用Zookeeper做服务注册与发现中心代码实现

    一:Zookeeper用的是3.5.5版本,SpringBoot用的是2.1.6版本,SpringCloud用的是Greenwich.SR2版本,JDK用的是1.8: 服务提供者product-ser ...

  8. Servlet 表单及上传文件

    // 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestServletForm.java package com.test; impo ...

  9. Redis的安装（windows）

    一.安装redis windows版本的下载在https://github.com/MicrosoftArchive/redis/tags msi是安装版,zip的解压就能用.建议下msi的. 下载挺 ...

  10. qt 旧项目编译运行提示 “启动程序失败，路径或者权限错误？” 原因及解决方法

    qt 旧项目编译运行提示 "启动程序失败,路径或者权限错误?" 原因及解决方法 原因 Qt Creator在打开项目文件的同时会生成.pro.user文件,.pro.user文件叫 ...