javascript之DOM基本操作

最新推荐文章于 2024-07-30 22:36:34 发布

慕筱佳丶

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量144

点赞数

分类专栏： JavaScript 文章标签： javascript

幕筱佳丶

本文链接：https://blog.csdn.net/weixin_51138142/article/details/119685546

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

心语：过去的人有过去的好但最好的都是你身边的那个。

在起初的网站开发中，其实接触最多的就是DOM对象，javasript更多的是用来交互的，那么我们所操作的页面中的元素都被称为DOM对象，一个网页其实是由许许多多DOM元素组成了一个树形结构，DOM被称为javascript中的文档对象模型，所以我想说的是对于DOM元素的操作是很重要的。接下来就我们一起进入DOM的世界去探索吧！

俗话说百川东到海，总有一处是尽头。

那么对于DOM元素的尽头是哪里呢？
在每一个网页中，其实都有一个根节点，也就是document，就像一棵树一样，总会有根来支撑整棵树，那么对于页面的DOM树也是如此。

既然javascript更多的是操作DOM元素，那么到底我们该如何操作呢？首先最起码应该先拿到DOM元素吧。

1.获取DOM元素

获取 body、html特殊的DOM元素

var bodyElement = document.body   //获取body
var htmlElement= document.documentElement //获取html元素

根据id来获取带有id的DOM元素

var div = document.getElementByld("#box");

根据标签名来获取(获取的是一个对应标签数组,可以通过下标来获取对应的元素)

var div = document.getElementsByTagName("div")[0];

根据类名class来获取(获取的是一个对应类名的数组,可以通过下标来获取对应的元素)

var oDiv = document.getElementsByClassName("div")[0];

通过H5提供的方式来获取（兼容性很强）

var oDiv = document.querySelector("类名");   //获取该类名的第一个元素对象
var oLi = document.querySelectorAll("类名");   //获取该类名的所有元素

2.创建DOM元素

<script type="text/javascript">
 let h1 = document.createElement("h1");   //创建一个h1
</script>

3.添加DOM元素

<div id="box"></div>
<script type="text/javascript">
 let h1 = document.createElement("h1");   //创建一个h1
 document.querySelector('#box').appendChild(h1);  //把h1插入div中
</script>

4.删除DOM元素

 //获取父节点
var parent=document.getElementById("context");
//获取子节点
var child=document.getElementsByTagName("p")[0];
//删除父节点下面的子节点，如果不获取父节点直接来删除子节点就无法删除
parent.removeChild(child)

5.在标签内插入内容

//将内容插入到指定的元素中并替换元素中已有的内容
document.getElementById("context").innerHTML="七夕快乐";
document.getElementById("context").textHTML="七夕快乐";

注意：
1.innerHTML返回的是标签内的 html内容，包含html标签。
2.innerText返回的是标签内的文本值，不包含html标签。
3.innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的。
4.尽可能地去使用 innerHTML，而少用innerText。

6.DOM元素属性操作

var parent=document.getElementById("context");
.attributes 元素所有属性的集合
parent.getAttribute("attr") 获取属性
parent.setAttribute("attr","val") 设置属性
parent.removeAttribute("attr") 移出属性
parent.hasAttribute("attr") 判断是否有这个属性

7.事件交互

对于事件交互，javascript有很多，主要常用的有点击事件、键盘事件、鼠标事件、焦点事件等等，这里我就点击事件演示一下。

<body>
<input type="button" value="按钮" id="btn">
<script>
    document.getElementById("btn").onclick = function () {
        //执行点击之后的逻辑操作
    };
</script>

对于每中事件都有自己的event事件对象，在里面包含了许多关于该事件的属性以及方法。

<script>
    document.getElementById("btn").onclick = function (event) {
       console.log(event)
    };
</script>

8.事件冒泡和事件捕捉

事件发生就会产生事件流，当一个DOM元素产生一个事件时，该事件会在元素节点和根节点之间按特定的顺序转播，类似于递和归。javascript的所有事件默认是冒泡。
事件冒泡是由下往上，从当前触发事件的元素直到document元素
事件捕获是由上往下，从document元素直到当前触发事件的元素
那么如果我们想阻止事件的冒泡，又该怎么做呢？

<script>
    document.getElementById("btn").onclick = function (event) {
       e.stopPropagation()  //阻止冒泡
    };
</script>

<script>
    document.getElementById("btn").onclick = function (event) {
       return false;  //return false 阻止冒泡，也阻止行为,但是这样的话下面的代码无法执行，一般不建议使用
    };
</script>

9.阻止事件冒泡行为

对于事件的冒泡行为，常用的就是a标签

e.preventDefault();  //存在兼容性问题

10.获取DOM元素内部的宽高

clientWidth和clientheight设置内部的宽度和高度
scrollWidth和scrollheight设置内容区的宽度和高度
scrolleft和scrollTop属性来设置滚动条到元素的距离

#box {
	width:300px;
	height:300px;
}

<div id="box "></div>

<script>
   var box = document.getElementById("box")
   var boxWidth = box.clientWidth   //300px  这里获取的是元素实际内容的宽
   var boxWidth = box.clientheight//300px  这里获取的是元素实际内容的高
</script>

对于这三种宽高，其实还是比较难理解的，很多人可能会搞混淆，这里我只介绍下关于如何获取，想深入了解的话可以自行查阅相关文章。

以上是我平时常用的一些关于操作DOM元素的基本用法，希望可以帮助到对于刚入门的小伙伴们，前端这个领域，需要掌握的很多，而javascript是特别重要的，我们需要做到温故而知新才能在这条职业道路上走的更稳，走的更远。共勉。。

刚好今天是一年一度的七夕情人节，我还在这里写文章，其实挺枯燥的，但是有句话说的好，孤独是人生的常态，我们只需要坦然面之，最后，祝愿有对象的小伙伴们明天能陪女朋友过个快乐的节日，珍惜当下就是最好的生活。狗命要紧，晚安 ~

慕筱佳丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript之DOM基本操作

在起初的网站开发中，其实接触最多的就是DOM对象，javasript更多的是用来交互的，那么我们所操作的页面中的元素都被称为DOM对象，一个网页其实是由许许多多DOM元素组成了一个树形结构，DOM被称为javascript中的文档对象模型，所以我想说的是对于DOM元素的操作是很重要的。接下来就我们一起进入DOM的世界去探索吧！俗话说百川东到海，总有一处是尽头。那么对于DOM元素的尽头是哪里呢？在每一个网页中，其实都有一个根节点，也就是document，就像一棵树一样，总会有根来支撑整棵树，那么对于
复制链接

扫一扫