原生Js操作DOM
查找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的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
- 原生js操作Dom命令总结
常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.getElementsByTagName(“div”);根据标签名获取页面 ...
- 原生js操作dom备忘
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
随机推荐
- mysqldump 备份脚本
#!/bin/bash DUMP=/usr/bin/mysqldump OUT_DIR=/home/mysql LINUX_USER=root DB_NAME=snale DB_USER=root D ...
- 基于hi-nginx的web开发(python篇)——cookie和会话管理
hi-nginx通过redis管理会话. 要开启管理,需要做三件事. 第一件开启userid: userid on; userid_name SESSIONID; userid_domain loca ...
- echarts图表变形解决方案
在同一页面的多个echarts图在查询或切换图片时可能会变形,如图 解决方案是添加以下几行代码 /*在查询或切换统计图时图片有可能会变形,于是每次调getEchartsData()都给每个chart的 ...
- oracle管理权限和角色
介绍 这一部分主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必需为其授予系统的权限:如果 ...
- Dynamics 365 for CRM: Sitemap站点图的可视化编辑功能
Dynamics 365 for CRM 提供了Sitemap站点图的可视化编辑功能 在之前的所有版本中,我们只能通过从系统中导出站点图的XML进行编辑后再导入(容易出错),或使用第三方的Sitema ...
- Vue项目使用CDN优化首屏加载
前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...
- "未找到应用程序的“aps-environment”的权利字符串"
1.先生成App ID,在去Provisioning里面生成新的Profile 2.删除Xcode里面原来的push profile(如果没有就不用删除)再次双击新下载的profile(mobilep ...
- 什么是KMP算法?KMP算法推导
花了大概3天时间,了解,理解,推理KMP算法,这里做一次总结!希望能给看到的人带来帮助!! 1.什么是KMP算法? 在主串Str中查找模式串Pattern的方法中,有一种方式叫KMP算法 KMP算法是 ...
- Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 1; 前言中不允许有内容。
Error creating document instance. Cause: org.xml.sax.SAXParseException; lineNumber: 1; columnNumber ...
- 新概念英语(1-32)A fine day
新概念英语(1-33)A fine day Where is the Jones family? It is a fine day today. There are some clouds in th ...