JavaScript基础操作——获取元素 id class

通过id的方式获取元素节点

document.getElementById(“id_name”)

<div id="shuzi">123456</div>
<script type="text/javascript">//文档.得到元素的idvar a = document.getElementById("shuzi")console.log(a)//返回元素对象,更好的查看里面的属性和方法console.dir(a)
</script>

通过标签的方法获取,以伪数组的形式返回元素对象的集合；

document.getElementsByTagName(‘li’)

根据类名获取元素

document.getElementsByClassName（‘类名’）

querySelector/什么都能选，返回所选的第一个元素,选择类需要. id需要#

document.querySelector(’#nav’)；
document.querySelector(‘li’)；

querySelectorAll 返回所有的匹配元素；

document.querySelectorAll(‘li’)

代码演示：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="shuzi">123456</div><ul class="cl"><li>123</li><li>123</li><li>123</li><li>123</li><li>123</li></ul><ul id="nav"><li class="li">1234</li><li>12344</li><li>12344</li><li>12344</li><li>12344</li></ul><script type="text/javascript">//文档.得到元素的idvar a = document.getElementById("shuzi")console.log(a)//返回元素对象,更好的查看里面的属性和方法console.dir(a)//通过标签的方法获取,返回元素对象的集合,以伪数组的形式var b = document.getElementsByTagName('li')console.dir(b)console.log(b[1])//获取某一标签下的元素var nav = document.getElementById('nav')var c = nav.getElementsByTagName('li')console.log(c[0])//根据类名获取元素var d = document.getElementsByClassName('cl')console.log(d)//querySelector/什么都能选 ，返回所选的第一个元素,选择类需要.  id需要#var e = document.querySelector('#nav')console.log(e)var f = document.querySelector('li')console.log(f)//querySelectorAll 返回所有的匹配元素var g = document.querySelectorAll('li')console.log(g)console.log(g[0])</script></body>
</html>

JavaScript基础操作——获取元素 id class相关推荐

微信小程序开发-点击事件，获取元素id
1.点击事件,获取元素id,页面传值参数传递: 小程序里的点击触发事件.如何获取当前元素的id.如何吧值传递到下一个页面例: <view class="kindleft"& ...
Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
php js获取元素id,javascript通过中文id和class获取元素的方法
以前以为html元素中的id和class等只能通过字母数字或者下划线等特殊字符命名,如果单存使用中文浏览器不会报错,但是js是获取不到的,但是今天逛论坛的时候发现不是这样的. 代码如下: 运行结果: ...
javascript js jquery获取元素位置代码总结
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小首先,要明确两个基本概念. 一张网页的全部 ...
JavaScript或js获取元素的值
一般可以用原生js及jQuery获取html元素的值. <div id="test">数值</div> 原生js写法: 1 alert(document.g ...
【ArcGIS基础操作:获取多边形质心】
如何计算多边形质心: 应用场景:计算出质心点后,可以将shp数据导出为json,里面涵盖中心点坐标:方便可视化展示 1 ArcCatalog新建字段目的:新建两个字段centerX和centerY来 ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
WebAPI第一天学习总结—— DOM、获取元素、事件基础、操作元素、节点操作
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...

JavaScript基础操作——获取元素 id class

JavaScript基础操作——获取元素 id class相关推荐

最新文章

热门文章