分享
查看: 2585|回复: 0

[FAQ] 页面元素的获取以及控制

[复制链接]

页面元素的获取以及控制

发表于 2022-6-29 13:57:50 来自 FAQ 只看大图 阅读模式 倒序浏览
zzv_icon2585 zzr_icon0 查看全部
dom,即document object model(文本对象模型)。整个页面元素统称dom。在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。

在前端开发中离不开我们的一些常用浏览器,调试的话也离不开浏览器中的控制台,在开发的过程中遇到问题时,我们第一时间是打开控制台来进行问题排查解决,在获取元素前我们先了解一下开发者工具中的一些常用操作,控制台中主要包括:元素审查,PC与移动端试图切换,元素查看,输出值,查看源文件,检测网络请求等等内容,,我们主要说明元素的使用:

1. 按下F12后可以看见浏览器调用了控制台界面出来

      页面元素的获取以及控制
2. 点击左上角的小箭头,然后就可以选中页面中的元素对象

      页面元素的获取以及控制

3. 选中对应的对象后就可以查看dom元素的对应的一些信息,例如id,class,css等等

       页面元素的获取以及控制

       更多浏览器工具介绍可以网页搜索进行更多信息前往查看

js获取节点方法:

  • 通过id名获取元素
    1. document.getElementById('test'))  // 如果想要获取的id不存在 返回值是一个 null
    复制代码

  • 通过类名(ClassName)获取元素,得到一个集合
    1. document.getElementsByClassName('test')
    2. document.getElementsByClassName('test')[i])//通过索引获取想要的元素
    复制代码

  • 通过标签(TagName)获取元素,获取到的是一组
    1. document.getElementsByTagName('li')
    2. document.getElementsByTagName('li')[i]; //通过索引获取想要的元素
    复制代码

  • 通过querySelector(css选择器)获取元素,只能获取一个元素(第一个)
    1. document.querySelector('#test')
    2. document.querySelector('.box')
    复制代码

  • 通过querySelectorAll(css选择器)获取元素
    1. document.querySelectorAll('.box')
    2. document.querySelectorAll('.box')[2]//通过索引获取想要的元素
    复制代码

      更多js内容前往 菜鸟教程 学习

jq获取元素节点方法

  • 通过id获取
    1. $('#id')  // 通过id获取
    复制代码

  • 通过class获取
    1. $('.className')  // 通过class名称获取
    复制代码

  • 通过标签名获取
    1. $('div')  // 获取所有的 <div> 元素
    复制代码

       更多jq内容可以前往 菜鸟教程 学习



avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t