原生JS 操作 DOM

最新推荐文章于 2022-07-28 19:28:35 发布

Rampage_w

最新推荐文章于 2022-07-28 19:28:35 发布

阅读量351

点赞数

本文链接：https://blog.csdn.net/Rampage_w/article/details/102925695

版权

DOM操作

查询
按照ID查询

document.getElementById(id) // 兼容最好

// demo
// HTMl
<body>
  <div id="main">
    <div id="content"></div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');

const contentDom = document.getElementById('content');

按照class查询

element.getElementsByClassName // ie9+
element.querySelectorAll // ie8
遍历 // ie7-

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');
const infoDomList1 = mainDom.querySelectorAll('.info.test');
const infoDomList2 = mainDom.getElementsByClassName('info test');

按照Tag查询

element.getElementsByTagName // ie6+

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const divDom = document.getElementsByTagName('div');
const pDom = divDom[0].getElementsByTagName('p');

按照属性查询
element.querySelector //ie8+
element.querySelectorAll() //ie8+
querySelector返回返回的是单个DOM元素，querySelectorAll返回NodeList
querySelector的语法很类似jquery里面的选择器，querySelector和querySelectorAll的使用方法是一样，所以下面的一些说法都是适用于两个。

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const infoDom = document.querySelectorAll('.info');
const infoDom2 = document.querySelectorAll('.info:not(.test)');

querySelectorAll 和 querySelector 在子查询下和jquery不是一样的，详见DOM元素querySelectorAll可能让你意外的特性表现
简单的说就是document.querySelector("#my-id").querySelectorAll(“div div”);，直接感觉是查询#my-id的子元素下符合div div的dom，其实不是，而是#my-id的子元素中，同时也符合在全局范围内的div div的dom。

获取父元素
element.parentNode // 基本都兼容
获取子元素
element.childNodes // 基本都兼容
element.childNodes不止会获取到DOM，也会获取到文字等，只有当nodeType === 1时才表示DOM。
获取兄弟节点
获取前面的兄弟节点
element.previousSibling //基本都兼容
获取所有前面的兄弟节点就是遍历previousSibling, 直到null。

Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 Node.firstChild 和 Node.previousSibling 之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点.

获取后面的兄弟节点
element.nextSibling //基本都兼容
获取所有和注意点都和previousSibling一样
DOM操作
创建DOM
document.createElement(tagName)
新增DOM
添加到节点的子节点的最后 append
paranetElement.appendChild(child);
添加到节点的前面
paranetElement.insertBefore(newElement, Element)

通过insertBefore方法可以将newElement插入到Element前面，如果Element是null则将newElement插入到paranetElement的尾部。
如果newElement是一个已经存在在文档中的DOM, insertBefore则会表现为移动该DOM(将会保留所有的事件)。
添加到节点的后面

parentDiv.insertBefore(sp1, sp2.nextSibling);
复制代码如果sp2没有下一个节点，则它肯定是最后一个节点，则sp2.nextSibling返回null，且sp1被插入到子节点列表的最后面（即sp2后面）
详见Node.insertBefore()
修改DOM
修改DOM的文案

Element.innerHTML // 获取标签内的所有内容
Element.innerText // 只获取标签内的文字内容，不包括标签
修改css
element.style.cssAttribute
修改属性
element.setAttribute()
element.removeAttribute()
element.className
删除DOM
paranetElement.removeChild(element)
清空子节点
没有专门的函数，可以遍历removeChild来实现

var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Rampage_w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS 操作 DOM

DOM操作查询按照ID查询document.getElementById(id) // 兼容最好// demo// HTMl<body> <div id="main"> <div id="content"></div> </div></body>// Scriptconst mainDom...
复制链接

扫一扫