dom操作获取元素

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量137 收藏
点赞数
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iloveyouwh/article/details/108248897
版权

跟着pink老师学了一些其前端知识，以下是我做的一些笔记……

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="time">2020-08-26</div>
    <ul>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
    </ul>
    <ol id='ol'>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
        <li>pink老师牛逼</li>
    </ol>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <li>首页</li>
        <li>产品</li>
    </div>
    <script>
        //1、 通过ID选择
        // ID选择返回的是一个element对象
        // 括号里面是字符串
        var timer = document.getElementById('time');
        // 检查是否成功获取
        console.log(timer);
        // 打印返回的属性和方法
        console.dir(timer);


        // 2、通过标签名获取
        // 返回的是获取元素对象的集合伪数组，有length，可以像数组一样遍历
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        // 通过父元素获取标签
        var ol = document.getElementById('ol');
        var lis = ol.getElementsByTagName('li');
        console.log(lis);


        // 3、根据类名获得元素
        // 获取的是伪数组
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);


        // 4、返回指定选择器的第一个对象
        var firstbox = document.querySelector('.box');
        console.log(firstbox);
        var nav = document.querySelector('#nav');
        console.log(nav);



        //5、 返回指定选择去的所有元素对象的集合
        var allbox = document.querySelectorAll('.box');
        console.log(allbox);



        // 6、获取body元素
        // 返回的是一个元素对象
        var bodyEle = document.body;
        console.log(bodyEle);


        //7、 获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

</html>
努力发光的程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
dom元素操作获取等
weixin_51525719的博客
12-10 1295
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)document.getElementsByName(" name"); 返回的是nodelist 类型, 用法和
dom元素的操作方式
ICY___的博客
01-14 220
好久不见呀，CSDN。最近一直才忙，今天先从一个基础知识点，dom元素的操作来说起吧。关于dom元素的操作，之前也有接触过一点点，但需要注意的是，dom元素过多的创建会影响浏览器的性能。所以呢，求人不如求己，与其抱怨浏览器的性能和其他，不如先从优化自己的代码开始。 再唠叨一下，何为dom （DOM: Document Object Module, 文档对象模型），通俗将就是可以实现从编程中更...
Dom 获取元素的几种方式
qq_66198247的博客
05-23 9882
一.Dom简介 文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 二.Dom树 文档：一个页面就是一个文档，Dom中用document表示 ； 元素：页面中的所有标签都是元素，Dom中使用element表示； 节点：网页中的所有内容都是一个节点（标签，属性，文本，注释等），Dom中使用node表示 Dom
JS中获取DOM的方法
知识点沉淀包括不限于前端
11-19 1111
获取DOM的方法 document.getElementById(‘id名’) 在document上下文下获取元素(通过Id获取的元素是一个元素对象，获取不到就是null) context.getElementsByTagName(‘标签名’) 通过指定的上下文获取指定的标签，获取的是一个元素集合，如果没有获取到元素，那就是空元素集合 context.getElementsByCla...
获取dom元素6种实现方式
qwyio的博客
03-29 7040
querySelector document.querySelector('选择器') querySelectorAll document.querySelectorAll('选择器') getElementById document.querySelectorAll('id名') getElementsByClassName document.getElementsByClassName('类名') getElementsByName document.getElementsB
DOM--获取元素
JJ_Smilewang的博客
05-24 590
1. 什么是DOM 文档对象模型（Document Object Model，简称 DOM），是 W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 2. 什么是DOM树 (1)DOM树：在内存中，集中保存一个网页中所有内容的树状图。 (2)为什么使用DOM树：能够直观的保存上下级包含关系的数据结构，html标签就是包含的关系，所以网页中每一项内容，在内存中，都是存在树形结构.
DOM——获取元素方式
weixin_68160847的博客
01-12 1006
（1）获取元素 （2）对元素进行操作（设置其属性或调用其方法） （3）动态创建元素 （4）事件（什么时机做相应的操作）
vue获取dom元素注意事项
08-28
因此，我们需要使用setTimeout函数来延迟获取DOM元素的操作。 例如，以下代码中，我们使用setTimeout函数来获取DOM元素的高： ``` mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ ...
Javascript Dom元素获取和添加详解
10-16
DOM元素的获取和添加是前端开发中的基础操作，对于创建交互式网页至关重要。 1. **DOM元素的获取** - `getElementById()`：这个方法通过指定的id值获取唯一匹配的DOM元素。例如，`document.getElementById('myID'...
Js操作DOM元素及获取浏览器高宽的简单方法
10-21
下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery Dom元素操作技巧
12-29
DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。 jquery 获取父节点，兄弟节点，在节点内插入内容。 ①$(#test1).parent() // 父节点 ②$(#test1).next() //下一个节点 ③$(#test1).append('...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
DOM获取元素 获取节点 操作节点
x0572_的博客
09-24 741
DOM获取元素 获取节点 操作节点
DOM 基本操作 - 获取元素
xy的博客
07-08 297
文档对象模型(Document Object Model),是 W3C 组织推荐的处理可拓展标记语言的标准编程接口。
1.dom元素——dom元素获取
ling_xy的博客
12-02 7581
什么是dom？ dom，即document object model(文本对象模型)。整个页面元素统称dom。 本质上是一种接口（API)，是专门操作网页内容的API标准 dom树 dom操作： 1.dom元素获取 2.dom元素属性操作（常规属性操作） 3.dom元素节点操作（子父节点之类的） 4.dom元素的事件（行为） 5.dom元素的方法操作 前提：要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在），根据页面的加载顺序来考虑 js里面如何获取dom元素 js里面dom..
js笔记（七）
qq_60587956的博客
02-27 414
1.DOM 1.1 什么是DOM 文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构，样式。 文档：一个页面就是一个文档，DOM中使用doucument来表示 元素：页面中的所有标签都是元素，DOM中使用 element 表示 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示 DOM 把以上内容都看做是对象 2.获取元素 2.1 如何获取页面元素 DOM在我们实际
【JAVAScript】dom获取元素的方式及实例
weixin_51612770的博客
05-12 3162
JAVAScript (dom易忘点：获取元素节点) 今天主要介绍两种获取元素的方式：document.方法（）和利用节点层级关系获取元素 需要注意的是：选取合适的获取方式，并考虑浏览器的兼容性（部分获取的方式IE9以下是无法使用的） 什么是DOM? 文档对象模型 (DOM) 是HTML的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页
DOM操作获取标签方法、数据类型
iteval
07-14 1527
操作 html 页面 获取标签 操作它的 肉体 和 灵魂 如何获取 css — 选中这个标签 / id / class / 标签名 .box { width: 100px; height: 200px; } #box { border-color: red; } p { margin-left: 100px; } js — 选中这个标签 / id / class / 标签名 var box = document.getElementById..
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 640
JavaScript青少年简明教程：函数及其相关知识（下）
uniapp 获取dom元素 进行操作
03-30
在uniapp中获取dom元素可以使用小程序的选择器api，具体步骤如下： ...注意：在uniapp中使用选择器api获取dom元素时，需要使用boundingClientRect方法获取元素信息，因为getBoundingClientRect方法在uniapp中不支持。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力发光的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值