常用的原生DOM操作汇总

最新推荐文章于 2022-11-23 14:27:08 发布
最新推荐文章于 2022-11-23 14:27:08 发布
阅读量1.7k 收藏 8
点赞数
文章标签： js
原文链接：https://juejin.cn/post/6966062224892756005#heading-45
版权

一、常见DOM操作

1. 获取查找DOM元素
Ele.getElementById(idName)

通过id查找元素。返回的是元素DOM，如果页面上有多个相同ID的元素，则只会返回第一个元素，不会返回多个（原则上ID只有一个，但伟大的程序员们。。。）

Ele.getElementsByClassName(className)

通过class查找。返回的是类数组结构，要想进行forEach遍历，需要先转化为数组结构

> const doms = document.getElementsByClassName('xxx') 
> const domsArr =Array.from(doms) 
> domsArr.forEach(dom=>{})
Ele.getElementsByTagName(tagName)

更具标签名获取元素，使用方式和getElementsByClassName一样。

Ele.querySelector(selectors) | Ele.querySelectorAll(selectors)

这两个是唯一支持使用选择器来查找元素的api，有个这个api我们在进行深层次查找的时候方便很多

<div class="warp">
    <p>name<p>
    <p>age<p>
<div>
<p>...</p>
<script>
// 目标 获取到warp下面的p元素
1. 不使用querySelectorAll
cons warp = document.getElementsByClassName("warp")[0];
const allp =  warp.getElementsByTagName(p)
2. 使用querySelectorAll
const allp = document.querySelectorAll(".warp p")
</script>

querySelector 获取单个元素，querySelectorAll 获取多个元素返回类数组结构

2. 给DOM增加样式
给元素增加样式
Ele.style.width = xxx
给元素增加class
Ele.className='aaa'  // 设置元素的class为aaa ，如果元素上原本有class则会覆盖
Ele.classList.add = "aaa" // 给Ele新增aaa
Ele.className += " aaa"  // 给Ele新增aaa
判断元素上是否有某个属性
Ele.classList.contains("aaa")  // 如果Ele上面有aaa属性返回true，否则返回false
3. 操作DOM上的属性
新增属性

Ele.setAttribute(“data-id”, 1);

获取属性的值

Ele.getAttribute(“data-id”);

删除属性

Ele.removeAttribute(“data-id”);

4. 面向dom元素的增删改查
创建DOM元素
 const p = document.createElement("p");
删除DOM元素
 Ele.remove(); // 删除ELe
 Ele.removeChild(clildEle) // 删除ELe中的子元素 childEle
复制DOM
Ele.cloneNode( true | false )
const box = document.getElementsByClassName("box")[0];
const p = document.createElement("p");
p.innerText = "一二三四五";
const p2 = p.cloneNode(true); // 复制一个p  参数true标识深度复制，如果p里面有子节点也复制过来
box.appendChild(p);
box.appendChild(p2);
如图，有得到了两个p标签，并都显示到了页面上去
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210526155110428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ5MTk4Nw==,size_16,color_FFFFFF,t_70#pic_left)
插入DOM
Ele.appendChild(ele) 在Ele的最后插入ele
Ele.insertBefore(newele,ele) // 在Ele元素中的 ele元素前插入 newele
替换DOM
parentEle.replaceChild(newEle,oldEle)
  <body>
    <div class="box">
      <h1>微信公众号</h1>
    </div>

    <button id="btn">变换</button>
    <script>
      const btnDom = document.getElementById("btn");
      const box = document.getElementsByClassName("box")[0];
      const h1 = document.getElementsByTagName("h1")[0];
      const h2 = document.createElement("h2");
      h2.innerText = "码不停息";
      btnDom.onclick = function () {
        box.replaceChild(h2, h1);
      };

    </script>
  </body>
删除DOM
EleParent.removeChild(ele) // 删除EleParent中的ele元素
遍历DOM

parentNode： 查找指定节点的父节点
nextSibling： 查找指定节点的下一个节点
previousSibling： 查找指定节点的上一个节点
firstChild： 查找指定节点的第一个字节点
lastChild： 查找指定节点的最后一个字节点
childElementCount：返回子元素的个数，不包括文本节点和注释
firstElementChild： 返回第一个子元素
lastElementChild： 返回最后一个子元素
previousElementSibling： 返回前一个相邻兄弟元素
nextElementSibling： 返回后一个相邻兄弟元素

值得注意的是节点和元素并不相等

<body>
    <div id="box">
      <p>文件</p>
      <p>文件</p>
    </div>

    <script>
      const box = document.getElementById("box");
      console.log(box.firstChild); // 打印 text节点（换行）
      console.log(box.firstElementChild); // 打印p标签
    </script>
 </body>
判断元素节点类型

nodeType，一共有12种类型，见 W3C

  <body>
    <div id="box">
      <p>文件</p>
      <p>文件</p>
    </div>

    <script>
      const box = document.getElementById("box");
      console.log(box.firstChild.nodeType); // 3 文本
      console.log(box.firstElementChild.nodeType); // 1 元素
    </script>
  </body>

二、获取浏览器宽高大满贯

1. 获取实际屏幕宽高

const W = window.screen.width
const H = window.screen.height

2. 获取浏览器宽高

const W = window.outerWidth;
const H = window.outerHeight;

3. 获取当前窗口宽高（浏览器视口宽高）

const W = window.innerWidth;
const H = window.innerHeight;

4. 获取元素布局宽高

const W = element.offsetWidth;
const H = element.offsetHeight;

5. 获取元素内容宽高

const W = element.scrollWidth;
const H = element.scrollHeight;

6.获取滚动后被隐藏页面的宽高

const H = document.documentElement.scrollTop;
const W = document.documentElement.scrollLeft

7. 获取元素距离顶部和左边距离

const top = Ele.offsetTop;
const left = Ele.offsetLeft

三、浏览器原生事件盘点

1. 鼠标事件
事件集合

单击事件

Ele.onclick = function () {
    console.log("onclick");
 };

双击事件

Ele.ondblclick = function () {
    console.log("ondblclick");
 };

右击事件

Ele.oncontextmenu = function () {
    console.log("oncontextmenu");
 };

鼠标按下事件

Ele.onmousedown = function () {
    console.log("onmousedown");
 };

鼠标移动事件

Ele.onmousemove = function () {
    console.log("onmousemove");
 };

鼠标抬起事件

Ele.onmouseup = function () {
    console.log("onmouseup");
 };

鼠标进来事件

// 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
Ele.onmouseover = function () {
    console.log("onmouseover");
 };
// 鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
 Ele.onmouseenter = function () {
    console.log("onmouseenter");
 };

鼠标离开事件

// 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件
Ele.onmouseout = function () {
    console.log("onmouseout");
 };
 // 鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件
 Ele.onmouseleave = function () {
    console.log("onmouseleave");
 };

基于鼠标事件完成拖拽

  const box = document.getElementById("box");
  let nowW, nowH, flag;
  box.onmousedown = function (e) {
    nowW = e.clientX;
    nowH = e.clientY;
    flag = true;
    document.onmousemove = function (e) {
      if (!flag) return false;
      const moveX = e.clientX - nowW;
      const moveY = e.clientY - nowH;
      const left = parseInt(box.style.left || 0);
      const top = parseInt(box.style.top || 0);
      box.style.left = left + moveX + "px";
      box.style.top = top + moveY + "px";
      nowW = e.clientX;
      nowH = e.clientY;
    };
    document.onmouseup = function () {
      flag = false;
    };
    document.onmouseleave = function () {
      flag = false;
    };
  };

基于鼠标事件完成自定义右键

<body>
    <div id="box"></div>
    <div id="option">
      <div class="item">复制</div>
      <div class="item">放大</div>
      <div class="item">搜索</div>
    </div>
    <script>
      const box = document.getElementById("box");
      const option = document.getElementById("option");
      box.oncontextmenu = function (e) {
        const x = e.clientX;
        const y = e.clientY;
        option.style.display = "block";
        option.style.top = y + "px";
        option.style.left = x + "px";
        return false;
      };
      option.onclick = function () {
        this.style.display = "none";
      };
    </script>
  </body>
2. 键盘事件
事件集合

keydown： 当用户按下键盘上的任意键时触发，而且如果按住按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发（就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发），而且如果按住不放的，会重复触发此事件（按下Esc键也会触发这个事件）。
keyup： 当用户释放键盘上的键时触发。

基于键盘事件完成使用方向键移动div

<body>
    <div id="box">
      <div id="move">静止</div>
    </div>
    <script>
      const box = document.getElementById("box");
      const move = document.getElementById("move");
      let lefts = box.style.left || 0;
      let tops = box.style.top || 0;
      document.addEventListener("keydown", function (e) {
        const code = e.keyCode;
        move.innerHTML = "开始移动";
        switch (code) {
          case 38:
            move.innerHTML = "上";
            tops -= 5;
            break;
          case 40:
            move.innerHTML = "下";
            tops += 5;
            break;
          case 37:
            move.innerHTML = "左";
            lefts -= 5;
            break;
          case 39:
            move.innerHTML = "右";
            lefts += 5;
            break;
          default:
            break;
        }

        box.style.top = tops + "px";
        box.style.left = lefts + "px";
      });
      document.addEventListener("keyup", function () {
        move.innerHTML = "静止";
      });
      document.addEventListener("keypress", function () {
        console.log("keypress");
      });
    </script>
  </body>
3. 表单事件
  • submit：表单提交
  • reset：表单重置
  • change：值发生改变
  • blur：离焦（不会冒泡）
  • focus：聚焦（不会冒泡）
4. window

window 事件指的是浏览器窗口本身而不是窗口内的文档对象。

  • onload：当文档和资源加载完成后调用
  • unload：当用户离开当前文档转而其他文档时调用
  • resize：浏览器窗口改变
5. 其他事件
  • beforeunload：关闭浏览器窗口之前触发的事件
  • DOMContentLoaded：文档对象加载完成之后就触发的事件，无需等待样式、图片等资源
  • readystatechange：document有 readyState 属性来描述 document 的 loading状态，readyState 的改变会触发 readystatechange 事件
  • document.readyState === ‘complete’ 页面已加载完毕
  • document.readyState === ‘loading’ 页面正在加载
  • pageShow 和 pagehide：每次用户浏览关闭页面时触发

四、Javascript原生对象盘点

1. 时间对象Date
常用的一些方法
  • toLocaleDateString()：根据本地时间格式，把Date对象的日期部分转化为字符串
  • toLocaleTimeString()：根据本地时间格式，把Date对象的时间部分转化为字符串
  • toLocaleString()：根据本地时间格式，把Date对象转化为字符串
  • getTime()：获取当前时间戳
    在这里插入图片描述
时间戳转换为时间
      function timestampToTime(timestamp) {
        if (typeof timestamp != "number") return false;
        if (timestamp.length === 10) timestamp = timestamp * 1000;
        const date = new Date(timestamp);
        Y = date.getFullYear() + "-";
        M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        D = (date.getDate() < 9 ? "0" + date.getDate() : date.getDate()) + " ";
        h =
          (date.getHours() < 9 ? "0" + date.getHours() : date.getHours()) + ":";
        m =
          (date.getMinutes() < 9
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
s = date.getSeconds() < 9 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      }
时间转化为时间戳
  function timeToTimestamp(time){
    const date = new Date(time);
    return date.getTime()
  }
2. Math对象

Math.abs()：取绝对值

Math.abs(-1)  // 1

Math.ceil()：向上取整

Math.ceil(1.1)  // 2

Math.floor()：向下取整

Math.floor(1.1)  // 1

Math.round()：四舍五入

Math.round(1.5)  // 2

Math.max()：取最大值

Math.max(1，2，3)  // 3

Math.min()：取最小值

Math.min(1，2，3)  // 1

Math.random()：产生0-1的随机数

Math.random()

Math.pow()：次方

Math.pow(2,3)  // == 2*2*2 == 8

Math.sqrt()：平方根

Math.sqrt(36)  // 6
mercurio13zeq
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS DOM操作方法汇总
weixin_34405557的博客
01-09 722
创建节点 1. document.createElement(tagname) 创建一个由tagName决定的HTML元素 2. document.createTextNode(data) 创建一个文本节点，文本内容为data 3. document.createDocumentFragment() 创建一个空白的文档片段。文档片段是 DocumentFragment 对象的引用。是DOM节点，但...
原生JS实现几个常用DOM操作API实例
12-29
原生实现jQuery的sibling方法 <body> 我是span标签 我是一个div 我是标题 我是一个段落 [removed] //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];...
兼容的firstChild,lastChild,nextSibling,previousSibling写法
05-11 172
在IE下是支持firstChild,lastChild,nextSibling,previousSibling 但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法是这样的...
原生js 之 (DOM操作）
m0_49515138的博客
11-23 2050
Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
原生DOM中的事件（事件流、事件委托）
一碗周
12-11 1607
大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第四十四篇-《原生DOM中的事件》 写在前面 事件是什么 所谓事件，就是浏览器告知JavaScript程序用户的行为，并且会提供一个自动加载某种动作（例如：运行一些代码）的机制。例如：如果用户在网页上点击一个按钮，显示一个信息框来响应这个动作。 在HTML中，时间在浏览器窗口中被触发并且通常被绑定到窗口内部的待定部分——可能是一个元素、一系列元素、被加载到这个窗口的HTML代码或.
原生js操作dom的笔记整理
isxixi的博客
12-06 1万+
javascript分为3部分 ECMAScript 基础语法 DOM d – document o object m –model 文档对象模型 BOM DOM DOM 给我们提供了一些方法，让我们可以使用js来控制页面中的标签等。页面元素 – 页面中的标签 常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.g
原生JS和jQuery操作DOM对比总结
10-20
本文将对比原生JavaScript和jQuery两种方式在DOM操作上的差异和优劣。 ### 一、创建元素节点 **原生JavaScript** 使用`document.createElement()`方法创建元素节点，例如创建一个`<p>`元素： ```javascript var ...
详解PHP原生DOM对象操作XML的方法
10-21
大家都知道对于操作XML类型文件，PHP...对XML的操作，从创建、添加到修改、删除都可以使用DOM对象中的函数来进行。下面这篇文章通过示例代码给大家介绍如何进行操作，有需要的朋友们可以参考借鉴，下面来一起看看吧。
JS中常见原生DOM操作API【总结整理)
程序猿开发日志【学习永无止境】
11-29 2万+
几种对象 Node Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment，document 等（所以要注意 节点 和 元素 的区别，元素属于节点的一种）。 Node有一个属性 nodeType 表示Node的类型，它是一个整数，其数值分别表示相应的Node类型
【面试系列】之四：关于原生dom操作
weixin_34148456的博客
08-21 165
之四：关于原生dom操作 下周被内推了百度糯米的面试，决定趁这个周末恶补下原生的js基础，感觉自己被jQuery惯坏了吧！前两天听首页部同组的大牛师兄说：“其实还是js基础重要，不要盲目追求新技术，基础练好了就像把自己的内功修炼好，内功扎实才能修炼好武功秘籍！否则都是飘飘然” 说的好对！特别感谢同组的技术大牛师兄。今天我要说的是js原生的...
原生js的dom操作(常用的整理)
jonsen的博客
05-29 1956
父节点parentNode第一个子节点 只会获取到元素节点firstElementChild ★★★★★ ​第一个子节点 (如果有文本节点将会获取到文本节点)firstChild​最后一个节点 只会获取到元素节点lastElementChild ★★★★★最后一个子节点 (如果有文本节点将会获取到文本节点)lastChild ​当前节点的后一个（下一个）节点 注：只会获取到元...
原生DOM操作汇总
Kevin_zuo的博客
07-12 488
节点类型 Attr Document Element Text ……其他 节点之间的关系 父节点：parentNode 子节点：childNodes 前一个兄弟节点：nextSibling 后一个兄弟节点：previousSibling 第一个子节点：firstChild 最后一个子节点：lastChild 节点元素关系
原生DOM操作
Zxf_xcn的博客
05-27 220
查找DOM Ele.getElementByClassName() Ele.getElementsByTagName() Ele.querySelector() | Ele.querySelectorAll('.warp a')//快速查找warp下的所有a 给DOM添加样式 Ele.style.width = 12 给元素添加class Ele.className = 'aaa'//直接覆盖之前的类名 Ele.classList.add = 'aaa'//不覆盖 Ele.className +
原生JavaScript Dom方法
YuqiRealm.com
03-31 579
在原生JS中，所有的节点都是Node类型。获取子节点var firstChild = someNode.childNodes[0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;获取第一个／最后一个子节点：someNode.firstChild someNode.lastC
常见的原生javascript DOM操作
weixin_34121304的博客
12-01 364
打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com 看图识文（取自 寒冬winter 的微博）。文章里引用了MDN和《javascript高级程序设计3》里的知识。如有不对的地方，敬请指出。 1.创建元素 创建元素：document....
【JS】原生JS的DOM操作之插入元素
mooonyuan的博客
03-13 2万+
插入元素主要是：在已有元素前插入元素和在已有元素后插入元素 在已有元素前插入元素 DOM提供了insertBefore()方法，这个方法将一个新元素插入到一个现有的元素中 需要满足三个条件： 1. 新元素：你想插入的元素 （newElement） 2. 目标元素：你想把这个新元素插入到那个元素（targetElement）之前 3. 父元素：目标元素的父元素（pare...
原生常用dom操作方法
wyysgsdbyeorno的博客
08-02 155
js常用的dom操作方法有哪些？ 查找: getElementByid getElementByTagName quertSelector querySelectAll 插入 appendChlid,insertBefore 删除 removeChild 克隆 cloneNode 设置和获取属性：...
原生JS获取HTML DOM元素的8种方法
热门推荐
荧光之烛
06-13 2万+
JS获取DOM元素的方法（8种） 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 通过选择器获取一个元素（querySelector） 通过选择器获取一组元素（querySelectorAll） 获取html的方法（docume...
原生DOM与虚拟DOM
赵佳敏的博客
06-20 574
原生dom与虚拟dom
原生DOM代码
最新发布
05-25
以下是一个简单的原生DOM代码示例，用于创建一个包含文本和按钮的div元素，并在按钮点击时弹出一个提示框： ```html <!DOCTYPE html> <html> <head> <title>DOM示例</title> </head> <body> <div id="myDiv"> <p>这是一个包含文本和按钮的div元素。</p> <button id="myButton">点击我</button> </div> <script> // 获取div和按钮元素 var divElement = document.getElementById("myDiv"); var buttonElement = document.getElementById("myButton"); // 添加事件监听器，当按钮被点击时弹出提示框 buttonElement.addEventListener("click", function() { alert("按钮被点击了！"); }); // 修改div元素的文本内容 divElement.innerHTML = "<p>这是修改后的文本内容。</p>"; </script> </body> </html> ``` 在这个示例中，我们首先使用 `document.getElementById()` 方法获取了 `myDiv` 和 `myButton` 元素，然后使用 `addEventListener()` 方法为按钮元素添加了一个点击事件监听器。当按钮被点击时，浏览器会弹出一个提示框。最后，我们使用 `innerHTML` 属性修改了 `myDiv` 元素的文本内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值