JavaScript的DOM基本操作（上）

最新推荐文章于 2025-09-14 22:09:50 发布
原创 最新推荐文章于 2025-09-14 22:09:50 发布 · 1.2k 阅读 · 28 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #开发语言 #前端 #node.js #网络爬虫
#python

文章目录

JavaScript的DOM基本操作

  • DOM - Document Object Model
  • 是用于操作文档流相关内容的属性和方法
    • 操作元素修改样式
    • 操作元素修改属性
    • 操作元素改变位置
    • 操作元素添加事件
    • …

1. 获取元素

1.1 根据id名称获取

  • 语法：document.getElementById('id名称')
  • 作用：获取文档流中id名对应的一个元素
  • 返回值：如果有id对应的元素，就是这个元素，否则为null
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        // 获取元素
        var ele = document.getElementById('container')
        // 输出返回值
        console.log(ele)
        console.log(typeof ele)
    </script>
</body>
</html>

在这里插入图片描述

1.2 根据元素类名获取

  • 语法：document.getElementsByClassName('元素类名')
  • 作用：获取文档流中所有类名对应的元素
  • 返回值：必然是一个伪数组，如果有类名对应的元素，有多少获取多少，否则为空的伪数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <!--这里相当于有两个类名-->
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        // 获取元素
        var eles = document.getElementsByClassName('box')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)

        var eles = document.getElementsByClassName('content')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)
    </script>
</body>
</html>

在这里插入图片描述

1.3 根据元素标签名获取

  • 语法：document.getElementsByTagName('标签名')
  • 作用：获取文档流中所有标签名对应的元素
  • 返回值：必然是一个伪数组，如果有标签名对应的元素，有多少获取多少，否则为空的伪数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <!--这里相当于有两个类名-->
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        // 获取元素
        var eles = document.getElementsByTagName('div')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)

        var eles = document.getElementsByTagName('span')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)
    </script>
</body>
</html>

在这里插入图片描述

1.4 根据选择器获取一个

  • 语法：document.querySelector('选择器')
  • 作用：获取文档流中满足选择器规则的第一个元素
  • 返回值：如果有满足选择器规则的元素，就是第一个元素，否则为null
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <!--这里相当于有两个类名-->
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        // 获取元素
        var eles = document.querySelector('div')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)

        var eles = document.querySelector('.box')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)

        var eles = document.querySelector('#abc')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)
    </script>
</body>
</html>

在这里插入图片描述

1.5 根据选择器获取一组

  • 语法：document.querySelectorAll('选择器')
  • 作用：获取文档流中满足选择器规则的所有元素
  • 返回值：必然是一个伪数组，如果有满足选择器规则的元素，有多少获取多少，否则为空的伪数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <!--这里相当于有两个类名-->
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
    <script>
        // 获取元素
        var eles = document.querySelectorAll('div')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)

        var eles = document.querySelectorAll('.box')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)

        var eles = document.querySelectorAll('#abc')
        // 输出返回值
        console.log(eles)
        console.log(typeof eles)
    </script>
</body>
</html>

在这里插入图片描述

2. 操作元素内容

2.1 操作元素文本内容

  • 获取：元素.innerText
  • 设置：元素.innerText = '新内容'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="btn">操作内容1</button>
    <div>
        <p>文本内容</p>
    </div>
    <script>
        // 获取元素
        var ele = document.querySelector('div')
        var btn = document.querySelector('.btn')

        // 获取元素的文本内容
        console.log(ele.innerText)

        // 给按钮添加点击事件
        btn.onclick = function () {
            // 设置div内的文本内容
            ele.innerText = "替换内容"
        }

    </script>
</body>
</html>

2.2 操作元素超文本内容

  • 获取：元素.innerHTML
  • 设置：元素.innerHTML = '新内容'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="btn">操作内容1</button>
    <div>
        <p>文本内容</p>
    </div>
    <script>
        // 获取元素
        var ele = document.querySelector('div')
        var btn = document.querySelector('.btn')

        // 获取元素的文本内容
        console.log(ele.innerHTML)

        // 给按钮添加点击事件
        btn.onclick = function () {
            // 设置div内的超文本内容
            ele.innerHTML = "<span>替换内容</span>"
        }

    </script>
</body>
</html>

3. 操作元素原生属性

  • 获取：元素.属性名
  • 设置：元素.属性名 = '属性值'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>操作属性</button>
    <div id="box">div标签</div>
    <input type="password">
    <script>
        // 获取元素
        var box = document.querySelector('div')
        var inp = document.querySelector('input')
        var btn = document.querySelector('button')
		
		//获取
		console.log('box.id')

        // 给按钮添加点击事件
        btn.onclick = function () {
            // 修改元素属性
            box.id = 'content'
            inp.type = 'checkbox'
        }

    </script>
</body>
</html>
ele.getAttribute('id')
'content'
ele.setAttribute('id', 'myid')
undefined
ele.removeAttribute('id')

4. 操作元素自定义属性

  • 获取：元素.getAttribute('属性名')
  • 设置：元素.setAttribute('属性名', '属性值')
  • 删除：元素.removeAttribute('属性名')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>操作属性</button>
    <div id="box" hello="world">div标签</div>
    <script>
        // 获取元素
        var box = document.querySelector('div')
        var btn = document.querySelector('button')

        // 获取自定义属性
        console.log(box.getAttribute('hello'))

        // 给按钮添加点击事件
        btn.onclick = function () {
            // 修改元素属性
            box.setAttribute('hello', 'Bob')
            box.removeAttribute('id')
        }
    </script>
</body>
</html>

5. 操作元素类名

  • 获取：元素.className
  • 设置：元素.className = '新类名'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>操作样式</button>
    <div class="box">div标签</div>
    <script>
        // 获取元素
        var box = document.querySelector('div')
        var btn = document.querySelector('button')

        // 获取类名
        console.log(box.className)

        // 给按钮绑定点击事件
        btn.onclick = function () {
            // 设置类名
            box.className = 'content'
        }
    </script>
</body>
</html>

6. 操作元素行内样式

  • 获取：元素.style.样式名
  • 设置：元素.style.样式名 = '样式值'
  • 注意：只能获取和设置元素的行内样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>操作样式</button>
    <div style="width: 100px; height: 100px; background-color: pink">文本内容</div>
    <script>
        // 获取元素
        var box = document.querySelector('div')
        var btn = document.querySelector('button')

        // 获取行内样式
        console.log(box.style.width)
        console.log(box.style.height)
        console.log(box.style.backgroundColor)

        // 给按钮添加点击事件
        btn.onclick = function () {
            // 修改行内样式
            box.style.width = '200px'
            box.style.height = '200px'
            box.style.backgroundColor = 'skyblue'
        }
    </script>
</body>
</html>

7. 获取元素非行内样式

  • 获取：元素.window.getComputedStyle(元素).样式名
  • 注意：可以获取元素的行内样式和非行内样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button>操作样式</button>
    <div style="width: 100px; height: 100px; background-color: pink">文本内容</div>
    <script>
        // 获取元素
        var box = document.querySelector('div')
        var btn = document.querySelector('button')

        // 获取非行内样式
        console.log(window.getComputedStyle(box).width)
        console.log(window.getComputedStyle(box).height)
        console.log(window.getComputedStyle(box).fontSize)
    </script>
</body>
</html>

参考链接：JavaScript的DOM基本操作（上）
感谢您的阅读与支持，如果这篇文章对您有帮助，请关注点赞收藏，您的支持是我创作的动力！
在这里插入图片描述

JavaScript中如何获取按钮所在DIV的ID
04-26
JavaScript中如何获取按钮所在DIV的ID
JS获取元素的几种方法
m0_71966801的博客
07-09 3244
方法可以根据元素的标签名获取元素。这个方法也返回一个类数组对象。方法可以获取满足条件的所有元素，它返回一个NodeList对象。方法可以根据元素的类名获取元素。这个方法返回一个类数组对象。方法可以使用CSS选择器获取满足条件的第一个元素。方法可以根据元素的ID属性获取元素。通过标签名获取元素：使用。通过选择器获取元素：使用。通过ID获取元素：使用。通过类名获取元素：使用。
JavaScript之DOM常用属性及方法详解
发果叁
10-21 1万+
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
获取单行id方法大全（包含原生Js获取、jQuery获取、Vue.js获取...）
前端必备小窝
07-11 4006
以上是使用原生 JavaScript、jQuery 和 Vue.js 的三种方法，根据你的实际情况选择适合的方法来获取每行的ID值
《JS原理、方法与实践》- 类
张中华的博客
06-03 273
ES6发布于2015年6月份，新增了类，模块，箭头函数等，而且新增了13个内置对象：Symble,Map,Set,WeakMap,WeakSet,ArrayBuffer,TypedArray,DataView,GeneratorFunction,Generator,Promise,Reflect,Proxy。 ES2015中最大的改变应该就是启用class关键字，即类的概念。ES本身是基于对象的语言，虽然启用了类的概念，但是依然不是基于类的语言而是基于对象的语言。 class的用法 ES6中使用class的
js获取html id内容吗,js中通过id读写内容和调用函数的问题
weixin_39980002的博客
06-10 456
我也不知道怎么用文字去描述我的这个问题，所以可能问题的题目不能很好的表达出我的疑问，这里先给点进来看看的各位程序猿哥哥道谢啦(⌒∇⌒)是这样的，我写了一个简单的单击Save按钮后写入localStorage，然后单击Load从localStorage中读取信息并写入一个div里面的小功能,先上代码:Titlefunction onLoad(){// var btn_save = do...
JS DOM基本操作
最新发布
yunluoZZZ的博客
09-14 255
①.getElementsByTagName 通过标签名来获取元素节点 （若有多个相同标签，返回含有多个节点的类数组对象）②.getElementsByClassName 通过class名来获取元素节点（若有多个相同class，返回含有多个节点的类数组对象）③.getElementById 通过id名来获取元素节点（直接返回可操控的节点，而不是由节点构成的数组对象）④.querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
JavaScript DOM 的基本操作
z_959的博客
12-24 203
JavaScript DOM 的基本操作 获取的操作 获取元素节点 document.getElementById(id值) document.getElementsByTagName(标签名称) --- 节点集 document.getElementsByClassName(类名) --- 节点集 document.querySelector(选择器) ...
javascript DOM基本操作
dilian2457的博客
11-24 124
javascript DOM基本操作 1.DOM(Document Object Model 文档对象模型) 2.节点： 文档节点：document 元素节点：html、head、body、title、meta、h1、p等 属性节点：attr 文本节点：text 2.1节点获取 documen.getElementById("元素ID") ...
js中Dom的基本操作
weixin_46676502的博客
04-12 158
什么是Dom 1.dom的英文全称为Document Object Model(文档对象模型) 2.dom定义了表示和修改文档所需要的各种方法，简单的来说dom的功能是用来操作html以及xml的，也有人称Dom是html和xml的标准编程接口。另外，dom不能改变css样式，但是可以通过改变行间样式的方法间接的改变css的样式 如何通过dom方法找html中的标签 1.通过标签名：document.getElementsByTagName(‘div’)即选中所有的div 如果想选中第一个div，写成doc
js获取id后添加html代码,js获取Id的方法getElementById与$的由来和用Id判断元素是否存在及批量动态获取 Id...
weixin_35798118的博客
06-08 2409
要用js操作一个html元素必须获取到这个元素，而获取元素要用 getElementById() 方法，这个方法是通过元素的Id获取到元素这个对象。getElementById 字符比较多，写得比较长，所以现在常常又用$()来获取html元素对象，这又是怎么回事？其实$()本质还是通过getElementById()方法获取到html元素对象，只不过把这个获取方法定义为简单的$，这样书写简短快捷方...
JavaScript(Bom编程）
weixin_65474399的博客
03-01 3106
昨天给大家分享了JS的进阶，今天来继续给大家分享JS的BOM编程。 目录 一，常用的编程元素 二，获取元素的方法 1.通过id获取元素 2.通过标签名获取元素 3.通过class属性获取元素 4.通过name属性获取元素 三，元素中的常用事件 1.点击事件 2.焦点事件 3.鼠标移动事件 一，常用的编程元素 style:标签中的style属性(用于设置样式) h1-h6:标题标签，从大到小排列 b:加粗标签 br:跨行标签 hr:分割线biaoq font:字体标签.
3、 获取元素
weixin_45998542的博客
12-15 1123
3、 获取元素 1.根据ID获取 语法：document.getElementById(id) 作用：根据ID获取元素对象 参数：id值，区分大小写的字符串 返回值：元素对象 或 null 案例代码 <body> <div id="time">2019-9-9</div> <script> // 因为文档页面从上往下加载，先有标签，所以script写到标签的下面 var timer = document.get
js中根据元素名获取对象，根据id获取等等。。。
热门推荐
Heihei 's note
04-04 3万+
获取：//根据ID获取 var aa = document.getElementById('bo')； //根据元素名获取 返回一个集合 var bb = document.getElementsByTagName('input'); 改变背景颜色：&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="ut...
javaScript中获取元素的id
datouniao1的博客
08-10 6020
当用javaScript处理HTML中的元素的时候，我们首先要做的是获取元素，怎样来获取HTML元素，我们可以通过一个document中的函数 getElementById这个元素来获取通过id来获取元素，这个函数的返回值是一个元素，也可定义一个变量来接收返回，这样这个值我们就可以作为我们要处理的对象来处理 只有获取到元素我们才可以对元素进行处理，innerHTML是覆盖文本，将原来的文本覆盖，并且放上这个值 My First Web Page My First Paragraph docum
如何在Javascript中获取div id元素
一名可爱的技术搬运工
05-19 5411
在JavaScript中，您可以使用getElementById（）功能通过提供其标签ID来获取任何首选的HTML元素。 这是一个HTML示例，展示了如何使用getElementById（）函数获取DIV标签ID，并使用InnerHTML（）函数动态更改文本。 HTML… <html> <head> <title>getElementById exam...
JS获取Html标签属性的两种方法
chuxingbubian的博客
09-18 2万+
用JS获取Html标签属性 用JS获取Html标签属性有两种方法： 如Web开发 JS代码： var ka=document.getElementByI d(“link”); alert(ka.getAttribute(“id”)); alert(ka.id); 两种方法都能弹出a标签的ID属性，但从各浏览器兼容上来说用ka.id的方式更好，但对于自定义属性blogname,则就要用getAttr...
javascript获取事件源的id
友人C君的博客
03-16 1849
javascript写法 function(event){ alert(event.target.id); } jquery写法 function test(){ alert($(this).attr('id')); }
js使用this获取a标签id值
u014467070的博客
09-14 1万+
转载自：http://www.sufeinet.com/thread-2222-1-1.html 苏飞论坛问个基本问题！ 这个 this.id 在js里面取不到数据 这样写应该没有问题啊 function search(strObj, strID) { var idname = '#' + strID; if ($(idname).tex
javascript获取动态id
weixin_30335353的博客
05-23 236
function uuid(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random()*16|0, v = c == 'x' ? r : ( r&0x3|0x8 ); return v....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

遇事不決洛必達

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

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

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

打赏作者

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

抵扣说明：

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

余额充值