JavaScript学习DOM、页面元素的获取、事件、操作元素

最新推荐文章于 2022-05-25 15:09:23 发布
最新推荐文章于 2022-05-25 15:09:23 发布
阅读量289 收藏 2
点赞数
分类专栏： JS基础 文章标签： js javascript dom 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44870115/article/details/119493858
版权

文章目录

  • Web API是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM) 。
  • DOM就是一个编程接口，处理可扩展标记语言(HTML或XML)。通过DOM接口，可以改变网页的内容、结构和样式。
  • 一个页面就是一个文档。用document表示。
  • 页面中的所有标签就是元素，用element表示。
  • 页面中的所有内容都可以看作是节点(标签、属性、文本和注释)，用node表示。

获取元素

根据ID获取

使用getElementById()的方法获取。注意括号中的参数需要是字符串。返回的是一个DOM element对象，如果没找到，则返回null。

注意需要以document开头。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="time">2021-08-07</div>
</body>
<script>
    var timer = document.getElementById('time') //注意：JS从上往下加载，所以先要有标签，在获取。所以JS要写在下方。
    console.log(timer);
    console.dir(timer);//打印返回的元素对象，可以查看里面的属性和方法。
</script>

</html>

在这里插入图片描述

根据标签名获取

使用getElementsByTagName()方法，返回的是带有指定标签名的对象的集合。

括号中的参数是标签名，注意用字符串的格式。

如果没有这个标签，则返回一个空的伪数组。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[1]);
        //用for循环来遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>
</html>

在这里插入图片描述

如果页面中不仅有ul还有ol；如果只想获取ul中的li标签，则需要设定父元素。父元素必须是单个对象。一般通过如下方法：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>hello1</li>
        <li>hello2</li>
        <li>hello3</li>
        <li>hello4</li>
        <li>hello5</li>
    </ul>
    <ol id="ol">
        <li>python1</li>
        <li>python2</li>
        <li>python3</li>
        <li>python4</li>
        <li>python5</li>
    </ol>
    <script>
        var getId = document.getElementById('ol')
        var lis = getId.getElementsByTagName('li');
        console.log(lis);
    </script>
</body>

</html>

在这里插入图片描述

通过HTML5新增的方法获取

根据类名获取元素，document.getElementsByClassName(‘类名’)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var lis = document.getElementsByClassName('box')
        console.log(lis);
    </script>
</body>

</html>

在这里插入图片描述
根据指定选择器返回第一个元素对象。document.querySelector(‘选择器’)。需要加符号。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        var lis = document.getElementsByClassName('box')
        console.log(lis);
        //指定选择器，选择类型
        var firstBox = document.querySelector('.box')
        console.log(firstBox);
        //指定选择器，选择id
        var nav = document.querySelector('#nav')
        console.log(nav);
        //指定选择器，选择标签
        var li = document.querySelector('li')
        console.log(li);
    </script>
</body>

</html>

在这里插入图片描述
上面的只能返回第一个元素对象，如果想返回全部的，应该使用**querySelectorAll()**函数。用法与上述相同。

特殊元素获取

获取body元素和html标签

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //返回的是一个元素对象。
        var getBody = document.body
        console.log(getBody);

        var getHtml = document.documentElement
        console.log(getHtml);
    </script>
</body>

</html>

在这里插入图片描述

事件基础

事件是JavaScript可以监听的行为，是一种触发响应的一种机制。像点击事件、鼠标事件和键盘事件等。

事件是由三部分组成的，分别是事件源、事件类型和事件处理程序。

事件源是事件被触发的对象，像按钮。
事件类型，例如鼠标点击、鼠标经过、键盘按下触发。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn')
        btn.onclick = function() {
            console.log('按钮被点击');
        }
    </script>
</body>

</html>

在这里插入图片描述
执行事件的步骤：

  1. 获取事件源，使用上述获取元素的方法。
  2. 绑定事件。btn.onclick
  3. 添加事件处理程序。

操作元素

操作元素首先要按照上述方法获取元素。

修改元素的内容

element.innerText：从起始位置到终止位置的内容，去除html标签，同时空格和换行也去掉。
element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。推荐使用。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 点击按钮 将当前的时间显示到div中去 -->
    <button id="btn">按钮</button>
    <div>某个时间</div>
    <script>
        var btn = document.getElementById('btn')
        var div = document.querySelector('div')
        btn.onclick = function() {

            div.innerText = new Date()

        }
    </script>
</body>

</html>

常见元素的属性操作

src、href、title等。
案例：点击按钮2改变图片

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="pic1">按钮1</button>
    <button id="pic2">按钮2</button>
    <img src="https://hao1.qhimg.com/t01ea3a44e231e5d6f4.png" alt="">
    <script>
        var pic1 = document.querySelector('#pic1')
        var pic2 = document.querySelector('#pic2')
        var img = document.querySelector('img')

        pic2.onclick = function() {
            img.src = 'https://pic3.zhimg.com/v2-12e0d5c340b583f8895afcf88c8db14e_is.jpg'
        }
    </script>
</body>

</html>

操作表单元素属性

如果想修改表单中的内容，可以通过value属性进行修改。
使用dom可以操作type、value、checked、selected、disabled这些表单元素的属性。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <input type="text" value="请输入内容">
    <script>
        var btn = document.querySelector('button')
        var input = document.querySelector('input')
        btn.onclick = function() {
            //表单中的值是通过value来修改的。
            input.value = '内容发生变化'
            //如果想要一个表单不能再点击
            btn.disabled = true
            //除了这种写法，还可以写为this.disabled=true,this指的是事件函数的调用者。
        }
    </script>
</body>

</html>

操作样式属性

通过JavaScript修改元素的大小、颜色、位置等样式。
element.style 行内样式操作
element.className 类名样式操作，样式很多的时候使用。

grt要一直一直努力呀
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BOM-浏览器对象模型，有这一篇就够了
qq_180494790的博客
10-30 603
~ window 对象是一个全局对象，也可以说是JavaScript的顶级对象 ~像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。 ~所以所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 ~window对象下的属性和方法调用的时候可以省略window
Javascript学习三——操作DOM
qq_57985179的博客
10-11 181
目录 一、使用节点 （1）节点类型 （2）节点名称与值及其关系 （3）访问和操作节点 二、使用文档节点 （1）访问文档子节点 （2）访问文档信息、元素和集合 三、使用元素节点 一、使用节点 （1）节点类型 DOM规定整个文档是一个文档节点，每个标签是一个元素节点，元素包含的文本是节点文本，元素的属性是一个属性节点，注释属于注释节点，如此等等。 （2）节点名称与值及其关系 使用节点的nodeName和node Value属性可以读取节点的名称和值。 DOM把....
JavaScript脚本语言 -DOM - 事件基础与操作元素细节
qq_39123467的博客
01-20 1139
逻辑性不强，都是死记硬背的东西，需要多练习
BOM(浏览器对象模型)
我的博客
05-25 683
JS、BOM
JavascriptDOM操作页面元素
yyjiuguilian的博客
01-18 1310
Document 是window的一个重要属性 document.documentElement 获取的DOM节点是html元素 document.getElementsByTagName(‘html’)[0] 获取的DOM节点也是html元素 document.body 获取的DOM节点是body元素。 访问元素的行内样式 任何支持 style 特性的 HTML元素在 JavaScript ...
javascript 精确获取页面元素的位置
10-29
现在网上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法，累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。
JavaScript获取DOM元素的11种方法总结
01-21
在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做...
用JavaScript获取DOM元素位置和尺寸大小的方法
12-01
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些...
JavaScript文档加载模式以及元素获取
11-20
就会导致js中无法获取页面中的DOM对象。解决方法：onload事件，会在整个页面加载完之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的...
JavaScript获取页面上某个元素的代码
12-04
W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素，常见的方法有getElementById（）、getElementsByName（）、getElementsByTagName（），他们的作用分别通过id属性、name属性/标签名称返回单个...
JavaScript DOM操作
好好学习天天向上
03-27 5060
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
HTML DOM 事件
akuibpt23191的博客
07-13 557
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
那些web前端经典面试题大全及答案
热门推荐
weixin_33743703的博客
01-16 1万+
阅读目录JavaScript部分JQurey部分HTML/CSS部分正则表达式开发及性能优化部分本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题，并且都给出了我在网上收集的答案。马上就要过春节了，开年就是崭新的一年，相信很多的前端开发者会有一些跳槽的悸动，通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。（如有错误或更好的答案，欢迎指正，水平有限，望各位不吝...
DOM学习——DOM获取页面元素对象的方式总结
zjhahaha123的博客
04-20 722
目录一、为什么要获取元素二、DOM获取元素的方式1.通过DOM提供的方法获取元素①通过id获取②通过标签名tagName获取③通过类名class获取④通过name获取⑤通过选择器获取⑥特殊元素获取--body、html2.利用节点层级关系获取元素①节点概述②获取父级节点③获取子节点总结 一、为什么要获取元素 在页面中，我们通常要对一些元素进行操作，比如点击更换页面背景、修改文字内容等，这是需要先获...
webapi-03
qq_62413209的博客
02-15 383
webapi-03 1.删除节点 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // // 1.获取元素 // var ul = document.querySelector('ul'); // ul.rem...
js获取页面元素的方法和触发
Alemon的博客
11-03 960
获取页面元素的两种方法 一、利用DOM提供的方法获取元素 方法 作用 document.getElementById(‘id名’) 通过 id 返回对象合集 document.getElememtByTagName(‘标签名’) 通过标签名返回对象合集 document.getElementsByClassName(‘类名’) （H5新增）根据类名返回对象合集 document.querySelector(‘选择器’) （H5新增）根据指定选择器返回对象合集，类选择器 .box、
获取界面上所有的控件的数据
qq_16709435的博客
09-13 487
function GetPageData() { var result = {}; $("input[type='text'][name],input[type='number'][name],textarea[id][name],input[type='checkbox'][name],input[type='radio'][name],inpu...
获取页面元素的方法
David
10-15 139
document.getElementsByName()    是根据控件名称获取这个控件对象，因为控件名称可以相同，返回的是一个对象数组。 document.getElementById()      是根据控件ID获取这个控件对象，因为控件ID唯一，返回的是一个对象。 document.getElementsByTagName() 是根据控件TAG获取这个控件对象，返回的是一个对象数组。 例如...
js操作元素内容学习
bingmo_的博客
10-10 384
<html> <head> <title>js操作元素内容学习</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> #div01{ ...
js操作控制iframe页面的dom元素
最新发布
06-09
要操作控制iframe页面的dom元素，需要先获取到iframe元素，然后通过iframe元素的contentWindow属性获取到iframe内部的window对象，最后通过window对象就可以访问到iframe内部的dom元素。以下是一个简单的示例代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值