[学习交流] 这些原生DOM操作你还记住多少

常见DOM操作获取查找DOM元素Ele.getElementById(idName)通过id查找元素。返回的是元素DOM，如果页面上有多个相同ID的元素，则只会返回第一个元素，不会返回多个（原则上ID只有一个，但伟大的程序员们。。。）
Ele.getElementByClassName(className)通过class查找。返回的是类数组结构，要想进行forEach遍历，需要先转化为数组结构

[JavaScript] 纯文本查看 复制代码

const doms = document.getElementByClassName('xxx')

const domsArr = Array.from(doms)

domsArr.forEach(dom=>{})

Ele.getElementsByTagName(tagName)更具标签名获取元素，使用方式和getElementByClassName一样。
Ele.querySelector(selectors) | Ele.querySelectorAll(selectors)这两个是唯一支持使用选择器来查找元素的api，有个这个api我们在进行深层次查找的时候方便很多

[JavaScript] 纯文本查看 复制代码

<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>

给DOM增加样式给元素增加样式

[AppleScript] 纯文本查看 复制代码

Ele.style.width = xxx

给元素增加class

[AppleScript] 纯文本查看 复制代码

Ele.className='aaa'  // 设置元素的class为aaa ，如果元素上原本有class则会覆盖

Ele.classList.add = "aaa" // 给Ele新增aaa

Ele.className += " aaa"  // 给Ele新增aaa

判断元素上是否有某个属性

[AppleScript] 纯文本查看 复制代码

Ele.classList.contains("aaa")  // 如果Ele上面有aaa属性返回true，否则返回false

操作DOM上的属性新增属性

[JavaScript] 纯文本查看 复制代码

Ele.setAttribute("data-id", 1);

获取属性的值

[JavaScript] 纯文本查看 复制代码

Ele.getAttribute("data-id");

删除属性

[JavaScript] 纯文本查看 复制代码

Ele.removeAttribute("data-id");

面向dom元素的增删改查创建DOM元素

[JavaScript] 纯文本查看 复制代码

 const p = document.createElement("p");

删除DOM元素

[JavaScript] 纯文本查看 复制代码

 Ele.remove(); // 删除ELe
 
 Ele.removeChild(clildEle) // 删除ELe中的子元素 childEle

复制DOM

[JavaScript] 纯文本查看 复制代码

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);

插入DOM

[JavaScript] 纯文本查看 复制代码

Ele.appendChild(ele) 在Ele的最后插入ele

Ele.insertBefore(newele,ele) // 在Ele元素中的 ele元素前插入 newele

替换DOM

[JavaScript] 纯文本查看 复制代码

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

[JavaScript] 纯文本查看 复制代码

EleParent.removeChild(ele) // 删除EleParent中的ele元素

遍历DOM

parentNode

查找指定节点的父节点

nextSibling

查找指定节点的下一个节点

previousSibling

查找指定节点的上一个节点

firstChild

查找指定节点的第一个字节点

lastChild

查找指定节点的最后一个字节点

childElementCount

返回子元素的个数，不包括文本节点和注释

firstElementChild

返回第一个子元素

lastElementChild

返回最后一个子元素

previousElementSibling

返回前一个相邻兄弟元素

nextElementSibling

返回后一个相邻兄弟元素
值得注意的是节点和元素并不相等

[JavaScript] 纯文本查看 复制代码

<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

[JavaScript] 纯文本查看 复制代码

 <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>

浏览器原生事件盘点
鼠标事件事件集合

单击事件

[JavaScript] 纯文本查看 复制代码

[mw_shl_code=javascript,true]Ele.onclick = function () {
console.log("onclick");
};

[/mw_shl_code]

双击事件

[JavaScript] 纯文本查看 复制代码

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

右击事件

[JavaScript] 纯文本查看 复制代码

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

鼠标按下事件

[JavaScript] 纯文本查看 复制代码

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

鼠标移动事件

[JavaScript] 纯文本查看 复制代码

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

鼠标抬起事件

[JavaScript] 纯文本查看 复制代码

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

鼠标进来事件

// 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

[JavaScript] 纯文本查看 复制代码

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

鼠标离开事件

// 鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

[JavaScript] 纯文本查看 复制代码

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

// 鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

[JavaScript] 纯文本查看 复制代码

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

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

[JavaScript] 纯文本查看 复制代码

<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>

表单事件submit：表单提交reset：表单重置change：值发生改变blur：离焦（不会冒泡）focus：聚焦（不会冒泡）
windowwindow 事件指的是浏览器窗口本身而不是窗口内的文档对象。
onload：当文档和资源加载完成后调用unload：当用户离开当前文档转而其他文档时调用resize：浏览器窗口改变
其他事件beforeunload：关闭浏览器窗口之前触发的事件
DOMContentLoaded：文档对象加载完成之后就触发的事件，无需等待样式、图片等资源
readystatechange：document有 readyState 属性来描述 document 的 loading状态，readyState 的改变会触发 readystatechange 事件
document.readyState === 'complete' 页面已加载完毕document.readyState === 'loading' 页面正在加载
pageShow 和 pagehide：每次用户浏览关闭页面时触发

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 这些原生DOM操作你还记住多少

0 个回复