查找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的更多相关文章

  1. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  2. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  3. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  4. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  5. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

  6. 原生js操作Dom命令总结

    常用的dom方法 document.getElementById(“box”);//通过id获取标签    document.getElementsByTagName(“div”);根据标签名获取页面 ...

  7. 原生js操作dom备忘

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  9. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

随机推荐

  1. mysqldump 备份脚本

    #!/bin/bash DUMP=/usr/bin/mysqldump OUT_DIR=/home/mysql LINUX_USER=root DB_NAME=snale DB_USER=root D ...

  2. 基于hi-nginx的web开发(python篇)——cookie和会话管理

    hi-nginx通过redis管理会话. 要开启管理,需要做三件事. 第一件开启userid: userid on; userid_name SESSIONID; userid_domain loca ...

  3. echarts图表变形解决方案

    在同一页面的多个echarts图在查询或切换图片时可能会变形,如图 解决方案是添加以下几行代码 /*在查询或切换统计图时图片有可能会变形,于是每次调getEchartsData()都给每个chart的 ...

  4. oracle管理权限和角色

    介绍 这一部分主要看看oracle中如何管理权限和角色,权限和角色的区别在哪里. 当刚刚建立用户时,用户没有任何权限,也不能执行任何操作.如果要执行某种特定的数据库操作,则必需为其授予系统的权限:如果 ...

  5. Dynamics 365 for CRM: Sitemap站点图的可视化编辑功能

    Dynamics 365 for CRM 提供了Sitemap站点图的可视化编辑功能 在之前的所有版本中,我们只能通过从系统中导出站点图的XML进行编辑后再导入(容易出错),或使用第三方的Sitema ...

  6. Vue项目使用CDN优化首屏加载

    前言 作为一个网站应用,加载速度是非常重要的.加载速度,一个是程序的合理安排,如以组件按需加载,一个是js.css等资源的异步加载. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打 ...

  7. "未找到应用程序的“aps-environment”的权利字符串"

    1.先生成App ID,在去Provisioning里面生成新的Profile 2.删除Xcode里面原来的push profile(如果没有就不用删除)再次双击新下载的profile(mobilep ...

  8. 什么是KMP算法?KMP算法推导

    花了大概3天时间,了解,理解,推理KMP算法,这里做一次总结!希望能给看到的人带来帮助!! 1.什么是KMP算法? 在主串Str中查找模式串Pattern的方法中,有一种方式叫KMP算法 KMP算法是 ...

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

  10. 新概念英语(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 ...