原生Js操作DOM
2018-04-19 21:08
435 查看
查找DOM
.querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素。
.querySelector(),返回第一个匹配的元素
<div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySelector(".wrap .header"); console.log(oHeader.innerHTML)/*header*/ </script>
缺点:
.querySelector()或者.querySelectorAll()获取到的结果不是实时的,所以当我们动态地添加一个匹配该选择器的元素的时候,元素集合不会更新。
var elements1 = document.querySelectorAll('div'); var elements2 = document.getElementsByTagName('div'); var newElement = document.createElement('div'); document.body.appendChild(newElement); elements1.length === elements2.length // false
元素列表
<div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySelector(".wrap"); console.log(oHeader.children); console.log(oHeader.firstChild); console.log(oHeader.lastChild); console.log(oHeader.previousSibling); console.log(oHeader.nextSibling); console.log(oHeader.parentNode); console.log(oHeader.parentElement); </script>
修改class和属性
修改元素的class像下面的代码这样简单:
oHeader.classList.add("active"); oHeader.classList.remove("wrap"); oHeader.classList.toggle("isError");
实例:
oHeader.classList.add("active");
oHeader.classList.remove("wrap");
oHeader.classList.toggle("active");
还有
.getAttibute(),
.setAttribute()和
.removeAttribute()这三个方法。这些方法直接修改的是元素的HTML属性(与DOM属性相对),因此会使浏览器重新渲染。浏览器重新渲染不仅比只是设置DOM属性代价更高,而且还会产生不期望的后果。
添加CSS样式
var oHeader = document.querySelector(".wrap"); oHeader.style.width = "160px"; oHeader.style.height = "160px"; oHeader.style.backgroundColor = "red";
如果我们想获得CSS规则的值,我们可以通过
.style属性。然而,通过它只能拿到我们明确设置过的样式。想拿到计算后的样式值,我们可以用
.window.getComputedStyle()。它可以拿到这个元素并返回一个CSSStyleDeclaration。这个返回值包括了这个元素自己的和继承自父元素的全部样式。
修改DOM
<div class="wrap"> <div class="header">header</div> </div> <script> var oWrap = document.querySelector(".wrap"); var oP = document.createElement("p"); oP.innerHTML = "原生Js"; oWrap.appendChild(oP); </script>
元素属性
每个元素都有
.innerHTML和
.textContent(还有
.innerText,跟
.textContent类似,但是有一些重要的区别。它们分别表示HTML内容和纯文本内容。它们是可写的属性,也就是说我们可以直接修改元素和它们的内容:
<div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySelector(".header"); oHeader.innerHTML = "active" </script>
像上面的代码那样向HTML添加标记是通常是一个不好的注意,因为这样是丢失之前对影响元素的属性做的修改(除非我们把那些修改作为HTML属性而保留下来和已经绑定的事件监听。设置
.innerHTML可以适合用在需要完全丢弃原来的而替换成新的标记的场景,比如服务端渲染。所以添加元素这样做比较好:
<div class="wrap"> <div class="header">header</div> </div> <script> var oWrap = document.querySelector(".wrap"); var oP = document.createElement("p"); oP.innerHTML = "原生Js"; oWrap.appendChild(oP); </script>
但是这个办法会引起两次浏览器的重新渲染-每次添加元素都会渲染一次-而用设置
.innerHTML的办法的话只会重新渲染一次。我们可以先把所有的节点组合在一个DocumentFragment里,然后把这一个片段添加到DOM里,这样可以解决这个性能问题。
<div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySelector(".header"); var fragment = document.createDocumentFragment(); var oP = document.createElement("p"); oP.innerHTML = "active"; fragment.appendChild(oP); oHeader.appendChild(fragment) </script>
事件监听
<div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySelector(".header"); oHeader.onclick = function onClick(event) { console.log(event.type + "got fred") } </script>
这可能是最知名的绑定事件监听的方法
但是这是通常应该避免采用的方法。这里,
.onclick是一个元素的属性,也就是说你可以修改它,但是你不能用它再绑定其他的监听函数-你只能把新的函数赋给它,覆盖掉旧函数的引用。
我们可以用更加强大的
.addEventListener()方法来尽情地添加各种类型的各种事件的监听器。它接受三个参数:事件类型(比如
click),一个无论何时在这个绑定元素上该事件发生都会触发的函数(这个函数会得到一个事件对象传进去作为参数)和一个可选的配置参数。
var oHeader = document.querySelector(".header"); oHeader.addEventListener("click",function (event) { console.log(event.type + "got fired") })
相关文章推荐
- 蓝鸥原生JS:DOM操作
- 原生JS的DOM操作之插入元素
- 原生JS操作iframe里的dom
- 浅谈原生JS和jQuery操作DOM
- 原生 js 操作dom的方法(创建节点和操作节点的几种方法)
- DOM操作,控制HTML元素 (原生JS)
- 原生JS与jQuery操作DOM对比
- 原生js操作dom汇总,不断添加中
- 框架操作DOM和原生js操作DOM比较
- 原生js操作dom的方法
- 原生JS操作DOM,项目内容积累
- 蓝鸥原生JS:什么是DOM及DOM操作
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
- 原生js操作Dom节点:CRUD
- 【转】 原生JS与jQuery操作DOM对比
- 原生JS的DOM操作汇总
- 原生JS实现的DOM操作笔记(草稿整理)
- 原生JS操作DOM的一些常用方法集合【转】
- 原生JS与jQuery操作DOM对比
- 原生js和jQuery的DOM操作函数速度比较