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

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>

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

赞 (0)

相关推荐

  • JS获取数组中出现次数最多及第二多元素的方法

    JS获取数组中出现次数最多及第二多元素的方法

    本文实例讲述了JS获取数组中出现次数最多及第二多元素的方法.分享给大家供大家参考,具体如下: 整型数组中出现次数最多和第二多的元素 用哈希数组 function f(arr){ var i; var length=arr.length; var hash=[];//使用哈希数组 for(i=0;i<length;i++){ if(!hash[arr[i]])hash[arr[i]]=1;//没有初始化的数组元素为undefined,undefined++为NaN else hash[arr[i]

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • 详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

  • js 获取元素所有兄弟节点的实现方法

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

  • JS获取动态添加元素的方法详解

    本文实例讲述了JS获取动态添加元素的方法.分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1.  在模板引擎里面添加行内事件 2.  利用事件的委托获取(常用) 3.  在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. <!-- 1.准备一个模板 --> <script id=&q

  • AngularJS遍历获取数组元素的方法示例

    AngularJS遍历获取数组元素的方法示例

    本文实例讲述了AngularJS遍历获取数组元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取数组的元素例子</title> <script src="angular.min.js"></script> <s

  • js jquery 获取某一元素到浏览器顶端的距离实现方法

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; padding: 0; } .mdiv{ width: 100px; height: 100px; background-color: red; } </style> </head> <bod

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

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 li[0].innerHTML = "content";//修改获取到标签中的内容 2.通过id获取页面元素 var header = document.getElementById("header");//id获取元素 3.通过class名字获取页面元素 var l

  • 利用JavaScript获取用户IP属地方法详解

    利用JavaScript获取用户IP属地方法详解

    目录 写在前面 尝试一:navigator.geolocation 尝试二:sohu 的接口 尝试三:百度地图的接口 写在后面 写在前面 想要像一些平台那样显示用户的位置信息,例如某省市那样.那么这是如何做到的, 据说这个位置信息的准确性在通信网络运营商那里?先不管,先实践尝试下能不能获取. 尝试一:navigator.geolocation 尝试了使用 navigator.geolocation,但未能成功拿到信息. getGeolocation(){ if ('geolocation' in

  • Javascript获取页面元素的绝对位置实现

    目录 一.概念 二.获取方法 三.代码 四.问题 一.概念 绝对位置:网页元素的左上角相对于整张网页左上角的坐标 相对位置:相对于浏览器窗口左上角的坐标 二.获取方法 1.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离. 2.每个元素都有offsetParent属性.offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定

  • jQuery取得iframe中元素的常用方法详解

    本文实例分析了jQuery取得iframe中元素的常用方法.分享给大家供大家参考,具体如下: jquery取得iframe中元素的几种方法: 在iframe子页面获取父页面元素 代码如下: 复制代码 代码如下: $('#objId', parent.document); 搞定... 在父页面 获取iframe子页面的元素: $("#objid",document.frames('iframename').document) $(document.getElementById('ifra

  • 用Javascript获取页面元素的具体位置

    用Javascript获取页面元素的具体位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

  • javascript 中关于array的常用方法详解

    javascript 中关于array的常用方法 最近总结了一些关于array中的常用方法, 其中大部分的方法来自于<JavaScript框架设计>这本书, 如果有更好的方法,或者有关于string的别的常用的方法,希望大家不吝赐教. 第一部分 数组去重,总结了一些数组去重的方法,代码如下: /** * 去重操作,有序状态 * @param target * @returns {Array} */ function unique(target) { let result = []; loop:

  • 用Javascript 获取页面元素的位置的代码

    用Javascript 获取页面元素的位置的代码

    下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的绝对大小.通常情况下,网页的绝对大小由内容和CSS样式表决定. 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口). 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页. (图一 网页的绝对大小和相对大小) 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的

  • JavaScript获取服务器时间的方法详解

    JavaScript获取服务器时间的方法详解

    本文实例讲述了JavaScript获取服务器时间的方法.分享给大家供大家参考,具体如下: Javascript是运行在客户端的脚本,我们一般都用new Date()来获取当前时间,但是得到的是客户端的时间,客户端时间是随意更改的,如果要做一个产品发布倒计时的话,客户端时间一改,就要闹笑话了.业务中需要用到服务器时间的场景还有很多,那么仅仅通过js怎么拿到服务器时间呢?事实上,只需要一个ajax请求就搞定,通过读取XMLHttpRequest对象的响应头里面的时间戳得到当前服务器时间! 原理就是这

  • Javascript 遍历页面text控件详解

    以下函数实现了列出页面中所有html控件类型为text的控件ID 复制代码 代码如下: function Texts()         {              //var els= document.getElementsByTagName("*");   //els得到页面所有控件              var els= document.getElementsByTagName("INPUT"); //上面的也可,这样可以减少循环          

  • Vue获取页面元素的相对位置的方法示例

    今天在开发源码一处发现有一处需要获取元素的相对位置高度,发现getBoundingClientRect有一个问题,它是用于获取某个元素相对于视窗的位置集合,达不到我想要的要求,如是看到阮老师写的一篇文章,关于用Javascript获取页面元素的位置,很好解决了我的我问题 发现问题 当我滚动到元素的位置时候,我想把元素固定在头部 // html 结构 <div :class="['source-subnav', isFixed ? 'tab-nav-fixed' : '']" re

随机推荐