转载:https://www.haorooms.com/post/js_dom_api

前言

很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统。不能说是API,今天来系统总结一下!

节点查找API

document.getElementById :根据ID查找元素,大小写敏感,如果有多个结果,只返回第一个;

document.getElementsByClassName :根据类名查找元素,多个类名用空格分隔,返回一个 HTMLCollection 。注意兼容性为IE9+(含)。另外,不仅仅是document,其它元素也支持 getElementsByClassName 方法;

document.getElementsByTagName :根据标签查找元素, * 表示查询所有标签,返回一个 HTMLCollection 。

document.getElementsByName :根据元素的name属性查找,返回一个 NodeList 。

document.querySelector :返回单个Node,IE8+(含),如果匹配到多个结果,只返回第一个。

document.querySelectorAll :返回一个 NodeList ,IE8+(含)。

document.forms :获取当前页面所有form,返回一个 HTMLCollection ;

节点创建API

createElement创建元素:

var elem = document.createElement("div");
elem.id = 'haorooms';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的haorooms测试节点';
document.body.appendChild(elem);

通过 createElement 创建的元素并不属于 document 对象,它只是创建出来,并未添加到html文档中,要调用 appendChild 或 insertBefore 等方法将其添加到HTML文档中。

createTextNode创建文本节点:

var node = document.createTextNode("我是文本节点");
document.body.appendChild(node);

cloneNode 克隆一个节点:

node.cloneNode(true/false) ,它接收一个bool参数,用来表示是否复制子元素。

var from = document.getElementById("test");
var clone = from.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);

克隆节点并不会克隆事件,除非事件是用

 

这种方式绑定的,用 addEventListener 和 node.onclick=xxx; 方式绑定的都不会复制。

createDocumentFragment

本方法用来创建一个 DocumentFragment ,也就是文档碎片,它表示一种轻量级的文档,主要是用来存储临时节点,大量操作DOM时用它可以大大提升性能。

节点修改API

1、appendChild

语法:

parent.appendChild(child);

2、insertBefore

parentNode.insertBefore(newNode, refNode);

3、insertAdjacentHTML

//js谷歌浏览器,火狐浏览器,IE8+
el.insertAdjacentHTML('beforebegin', htmlString);

关于insertAdjacentHTML,这个API比较好用,具体可以看:https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

4、Element.insertAdjacentElement()

用法和上面类似,

targetElement.insertAdjacentElement(position, element);

5、removeChild

removeChild用于删除指定的子节点并返回子节点,语法:

var deletedChild = parent.removeChild(node);

deletedChild指向被删除节点的引用,它仍然存在于内存中,可以对其进行下一步操作。另外,如果被删除的节点不是其子节点,则将会报错。一般删除节点都是这么删的:

function removeNode(node)
{
if(!node) return;
if(node.parentNode) node.parentNode.removeChild(node);
}

6、replaceChild

replaceChild用于将一个节点替换另一个节点,语法:

parent.replaceChild(newChild, oldChild);

节点关系API

1、父关系API

parentNode :每个节点都有一个parentNode属性,它表示元素的父节点。Element的父节点可能是Element,Document或DocumentFragment;

parentElement :返回元素的父元素节点,与parentNode的区别在于,其父节点必须是一个Element元素,如果不是,则返回null;

2、子关系API

children :返回一个实时的 HTMLCollection ,子节点都是Element,IE9以下浏览器不支持;

childNodes :返回一个实时的 NodeList ,表示元素的子节点列表,注意子节点可能包含文本节点、注释节点等;

firstChild :返回第一个子节点,不存在返回null,与之相对应的还有一个 firstElementChild ;

lastChild :返回最后一个子节点,不存在返回null,与之相对应的还有一个 lastElementChild ;

3、兄弟关系型API

previousSibling :节点的前一个节点,如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点,与预期的不符,要进行处理一下。

nextSibling :节点的后一个节点,如果不存在则返回null。注意有可能拿到的节点是文本节点,与预期的不符,要进行处理一下。

previousElementSibling :返回前一个元素节点,前一个节点必须是Element,注意IE9以下浏览器不支持。

nextElementSibling :返回后一个元素节点,后一个节点必须是Element,注意IE9以下浏览器不支持。

元素属性型API

1、setAttribute 给元素设置属性:

element.setAttribute(name, value);

其中name是特性名,value是特性值。如果元素不包含该特性,则会创建该特性并赋值。

2、getAttribute

getAttribute返回指定的特性名相应的特性值,如果不存在,则返回null:

var value = element.getAttribute("id");

3、hasAttribute

var result = element.hasAttribute(name);

var foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
// do something
}

4、dataset

获取html data-开头的属性,用法如下:

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

let el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === '' el.dataset.dateOfBirth = '1960-10-03'; // set the DOB. // 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

样式相关API

1、直接修改元素的样式

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

2、动态添加样式规则

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{color: white;}';
document.head.appendChild(style);

3、classList获取样式class

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass"); // if visible is set remove it, otherwise add it
div.classList.toggle("visible"); // add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 ); alert(div.classList.contains("foo")); // add or remove multiple classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax
let cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls); // replace class "foo" with class "bar"
div.classList.replace("foo", "bar");

4、window.getComputedStyle

通过 element.sytle.xxx 只能获取到内联样式,借助 window.getComputedStyle 可以获取应用到元素上的所有样式,IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);

获取相关高度API

关于js的高度,我再慕课网上面也录制了一个视频,js/jquery各种宽高的理解和应用

这里主要讲一下:

getBoundingClientRect

getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置,用法如下:

var clientRect = element.getBoundingClientRect();

clientRect是一个 DOMRect 对象,包含width、height、left、top、right、bottom,它是相对于窗口顶部而不是文档顶部,滚动页面时它们的值是会发生变化的。

总结js常用的dom操作(js的dom操作API)的更多相关文章

  1. javascript framework js常用框架

    js常用框架 一.node.js   二.angularjs.js   三.react.js   四.webpack.js   五.flux.js   六.vue.js   七.bootstrap   ...

  2. JS常用语句

    JavaScript常用语句 1.document.write("");    输出语句 2.JS中的注释为   // 3.传统的HTML文档顺序是:     document-& ...

  3. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  4. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  5. 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合

    站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...

  6. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  7. js常用总结

    常用总结,方便大家学习共享.   1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html-& ...

  8. 新人成长之入门Vue.js常用指令介绍(一)

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  9. js常用框架

    JS常用框架:jQuery.Prototype.MooTools 参考:w3cshool jQuery jQuery 是目前最受欢迎的 JavaScript 框架. 它使用 CSS 选择器来访问和操作 ...

  10. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

随机推荐

  1. iOS - 性能优化:Instruments使用简介

    最近采用Instruments 来分析整个应用程序的性能.发现很多有意思的点,以及性能优化和一些分析性能消耗的技巧,小结如下. Instruments使用技巧 关于Instruments官方有一个很有 ...

  2. 【转载】 C#中日期类型DateTime的日期加减操作

    在C#开发过程中,DateTime数据类型用于表示日期类型,可以通过DateTime.Now获取当前服务器时间,同时日期也可以像数字一样进行加减操作,如AddDay方法可以对日期进行加减几天的操作,A ...

  3. 【转载】 C#中使用Sum方法对List集合进行求和操作

    在C#的List操作中,有时候我们需要对List集合对象的某个属性进行求和操作,此时可以使用Lambda表达式中的Sum方法来快速实现此求和操作,使用Sum方法可使代码简洁易读,并且省去写for循环或 ...

  4. AJAX with JSP and Servlet(代码)

    欢迎任何形式的转载,但请务必注明出处. 本章内容来自YouTube需翻墙(点击进入视频学习) 服务器配置等可以参看我其他文章.注释等后续再加 效果图 结构   <body> <fie ...

  5. 【数字图像处理】gamma变换

    论文:gamma校正的快速算法及其c语言实现 gamma变换实现过程 假设图像中有一个像素,值是 200 ,那么对这个像素进行校正必须执行如下步骤: 1. 归一化 :将像素值转换为  0 - 1  之 ...

  6. Android笔记(二十) Activity中的跳转和值传递

    我们知道,一个APP是由若干个Activity组成的,那么各个Acitivity中肯定需要进行跳转以及传递数值以保证App的运行,现总结一下多个Activity之间的跳转和值传递. 显式Intent跳 ...

  7. Docker本地镜像上传到阿里云仓库

    登录阿里云 在容器镜像服务中先创建命名空间 随后创建镜像仓库 我使用的代码源是本地仓库 创建后点击仓库的管理 就可以看到阿里云提供的操作指南 (下面的操作每个人都不同,详情查看阿里云的操作指南) 输入 ...

  8. Understanding matrix factorization for recommendation

    http://nicolas-hug.com/blog/matrix_facto_4 import numpy as np import surprise # run 'pip install sci ...

  9. C++——宏观把控

    跟看所有的书一样,我们都要求第一遍泛读,宏观把控书本内容,C++依旧如此进行.看到前面这几章的时候感觉非常熟悉,因为能让我联想到很多以前学习的VB.C#等的知识,感觉轻松很多,原来我已经学过了很多东西 ...

  10. springboot项目对接支付宝支付

    支付宝对接文档 一.准备工作 1. 首先要到 蚂蚁金服开发者中心 https://openhome.alipay.com/platform/home.htm 注册商家账户,并认证. 2.下载java版 ...