原生js操控dom的方法

已于 2022-11-15 18:17:10 修改
阅读量231 收藏
点赞数
分类专栏： ts 文章标签： javascript 前端 html
于 2022-11-11 18:16:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/127808629
版权

getElementById() 方法：

var element=document.getElementById("intro");

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

这里提供一些您将在本教程中学到的常用方法：

getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

innerHTML 属性:

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

</body>
</html>

在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注意： nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性:

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

获取元素的值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="intro">Hello World!</p>
 
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
 
</body>
</html>

nodeType 属性:

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型NodeType
元素1
属性2
文本3
注释8
文档9

访问 HTML 元素（节点）：

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

getElementById() 方法：

getElementById() 方法返回带有指定 ID 的元素引用：

语法

node.getElementById('id')

实例：

document.getElementById("intro");

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

语法

node.getElementsByTagName('tagname')

实例：

document.getElementsByTagName("p"); //将p标签的内容打印了出来

下面的例子返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：

document.getElementById("main").getElementsByTagName("p");

如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：

document.getElementByClassName('intro')

上面的例子返回包含 class="intro" 的所有元素的一个列表：

创建 HTML 内容:

改变元素内容的最简单的方法是使用 innerHTML 属性。

下面的例子改变一个 <p> 元素的 HTML 内容：

<p id="p1">Hello World!</p>
 
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
 
<p>段落通过脚本来修改内容。</p>

改变 HTML 样式:

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

创建新的 HTML 元素:

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。

改变 HTML 内容:

改变元素内容的最简单的方法是使用 innerHTML 属性。

下面的例子更改 <p> 元素的 HTML 内容：

<p id="p1">Hello World!</p>
 
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
 
<p>段落通过脚本来修改内容。</p>

改变 HTML 样式:

通过 HTML DOM，您能够访问 HTML 对象的样式对象。

下面的例子更改段落的 HTML 样式：

<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
 
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

使用事件:

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素"有事情发生"时，浏览器就会生成事件：

  • 在元素上点击
  • 加载页面
  • 改变输入字段

你可以在下一章学习更多有关事件的内容。

下面两个例子在按钮被点击时改变 <body> 元素的背景色：

<input type="button"
onclick="document.body.style.backgroundColor='lavender';"
value="修改背景颜色">

在本例中，由函数执行相同的代码：

<script>
function ChangeBackground()
{
    document.body.style.backgroundColor="lavender";
}
</script>
 
<input type="button" onclick="ChangeBackground()" value="修改背景颜色" />

下面的例子在按钮被点击时改变 <p> 元素的文本：

<p id="p1">Hello world!</p>
 
<script>
function ChangeText()
{
    document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>
 
<input type="button" onclick="ChangeText()" value="修改文本" />

添加、删除和替换 HTML 元素。

创建新的 HTML 元素 - createElement()

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

实例：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

实例解析

这段代码创建了一个新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加文本节点：

para.appendChild(node);

最后，您必须向已有元素追加这个新元素。

这段代码查找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已存在的元素追加新元素：

element.appendChild(para);

创建新的 HTML 元素 - insertBefore()

上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

如果不希望如此，您可以使用 insertBefore() 方法：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
 
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须清楚该元素的父元素：

实例：

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

实例解析：

这个 HTML 文档包含一个带有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

查找 id="div1" 的元素：

var parent=document.getElementById("div1");

查找 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

实例：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

HTML DOM - 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

对事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：

οnclick=JavaScript

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时

在本例中，当用户点击时，会改变 <h1> 元素的内容：

<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

实例：
向 button 元素分配一个 onclick 事件：

<p>点击按钮执行 <em>displayDate()</em> 函数。</p>

<button οnclick="displayDate()">点我</button>

<script>
function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>
在上面的例子中，当点击按钮时，会执行名为 displayDate 的函数。

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：

实例：

为 button 元素分配 onclick 事件：

<p>点击按钮执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点我</button>

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。

当按钮被点击时，将执行函数。

onload 和 onunload 事件

<script>
function checkCookies()
{
    if (navigator.cookieEnabled==true)
    {
        alert("Cookie 可用")
    }
    else
    {
        alert("Cookie 不可用")
    }
}
</script>

<p>页面载入时，弹出浏览器 Cookie 可用状态。</p>

onchange 事件

<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" οnchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

实例：

一个简单的 onmouseover-onmouseout 实例:

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>
function mOver(obj)
{
    obj.innerHTML="Thank You"
}

function mOut(obj)
{
    obj.innerHTML="Mouse Over Me"
}
</script>

onmousedown、onmouseup 以及 onclick 事件

<div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>

<script>
function mDown(obj)
{
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="Release Me"
}

function mUp(obj)
{
    obj.style.backgroundColor="#D94A38";
    obj.innerHTML="Thank You"
}
</script>

fury_123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS 操控DOM 转换DIV 背景图 实现轮播图效果
MrHuBingo的博客
06-03 962
javascript 使用基础方法 可以实现轮播图的 方法如下 在新建的HTML 页面中 设置样式 *{ padding:0; margin:0; list-style:none; box-sizing: border-box; } .flex{ display: flex; justify-content: center;
前端项目实战6：js中常用的dom操作（隐藏or显示div）
qq_44139411的博客
04-05 3453
做这个搜索面板： 想要实现搜索之后弹出面板，点击页面其他地方，该面板隐藏 只需要： document.addEventListener('click',function(){ result.style.display='none'; })
1.2、原生js对DOM元素的获取及元素属性的操作和元素属性的内容操作
bin_2659017380的博客
09-21 1020
一、DOM元素的获取 1、通过id获取元素 document.getElementById(‘id值’) 元素本身 2、通过class获取 document.getElementByClassName（‘calss名’）数组 3、通过标签名获取 document.getElementByTagName(‘标签名’) 数组 4、通过元素name获取 ducument.getElementByNam...
用原生JS和用VUE获取dom对象的区别
M40153c的博客
08-19 287
用原生JS和用VUE获取dom对象的区别
原生JS，JQuery，Vue，React中的Dom操作
z16600248502的博客
08-14 557
1 . 获取Dom元素 <div id ="A' style=""></div> div --->dom元素 id style 这些是 属性 原生的就就不写了 1.1JQ中 $('div')//dom $('#a')//id $('.a')//class $('div')eq(1) //而且eq（1）数组中第2个元素 1.2Vue中 1.在指定元素上，添加ref=“名称A”，在获取的地方加入 this.$refs.名称A <div ref='A'></
day07原生js BOM和 DOM
Fengwu9166的博客
09-24 172
前端分为三部分： HTML、CSS、JS JS也分三部分： BOM、DOM、ECMAScript BOM: Browser Object Model 浏览器对象模型 简单来说就是window这个对象 可以通过window来操控浏览器 window.setInterval() ...
JavaScript DOM及其操作（获取节点方法）
modao的博客
06-08 207
本文主要介绍原生js 中 DOM节点的获取方法。
原生js之DOM事件相关
weixin_33832340的博客
01-16 103
前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实vanilla.js就是原生js，不过是网上的一个玩笑而已，但是却能说明一个很重要的问题，就是原生js很重要，所以这部分文...
vue操作dom元素的三种方法
热门推荐
weixin_45820444的博客
09-19 1万+
1.原生js操作dom const dom = getElementById(‘box’) 2.vue官方方法：ref vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到 < div class=“set” ref=“up”> .set是我们要操作的dom对象，它的ref是 up @click=“Alert” 给父元素一个点击事件， 接下来我们来编写这个方法 methods:{   this.$refs.addAlert.style.dis
原生JS实现获取及修改CSS样式的方法
10-18
本文将详细讲解如何使用原生JS来获取和修改CSS样式，包括行内样式、内部样式以及外部样式，同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如： ```html ...
JavaScript遍历DOM元素的常见方式示例
12-12
在JavaScript中，遍历DOM（文档...了解这些方法并熟练运用，能帮助开发者更高效地操控DOM，实现丰富的交互效果。同时，结合其他JavaScript DOM操作技巧，如事件处理、元素属性操作等，可以构建出强大的网页应用程序。
原生js实现2048小游戏
08-10
使用原生JavaScript操控DOM，我们可以监听键盘事件或者触摸事件，根据用户输入的方向（上、下、左、右）更新棋盘数据。每次滑动前，我们需要检查是否有可合并的方块；滑动后，我们需要更新棋盘显示，并检查游戏是否...
JS操控图片旋转缩放移动
02-01
这个项目标题"JS操控图片旋转缩放移动"表明它是一个使用原生JavaScript编写的插件，专门用于处理这些功能。下面我们将深入探讨这些知识点。 首先，**JS操控图片**涉及的主要技术是DOM操作。通过JavaScript，我们...
javascript 获取HTML DOM父、子、临近节点
12-04
除了上述基础方法，还有其他一些高级的DOM操作，比如通过CSS选择器获取元素（如jQuery的`$("#elementID")`或原生的`querySelector`和`querySelectorAll`），以及通过类名(`className`)获取元素（如`...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 80
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1310
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
js原生获取dom元素方法
10-14
可以使用以下方法获取 DOM 元素： 1. document.getElementById(id)：根据元素的 id 属性获取元素。 2. document.getElementsByTagName(tagName)：根据元素的标签名获取元素，返回一个 HTMLCollection 对象。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值