学习JS中的DOM节点以及操作


Posted in Javascript onApril 30, 2018

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!!

一、DOM树的节点

1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。

属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。

【查看元素节点】

1、 使用getElement系列方法:

具体的HTML代码如下图:

学习JS中的DOM节点以及操作

//通过ID来查看元素属性
var li = document.getElementById("first"); 
//通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");

注意事项:

① ID不能重名,如果ID重复,只能取到第一个。

② 获取元素节点时,必须等到DOM树加载完成后才能获取。

两种处理方式:

a.将JS写在文档最后;

b.将代码写入window.onload函数中;

③ 通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不能直接对数组进行操作。

document.getElementsByTagName("li")[0].click = function(){}

④ 这一系列方法,也可以先选中一个DOM节点,在从选中的DOM节点中,选择需要的节点:

document.getElementById("div1").getElementsByTagName("li");

【通过querySelector系列方法】

① 传入一个选择器名称,返回第一个找到的元素。 通常用于查找ID:

var dq1 = document.querySelector("#id");

② 传入一个选择器名称,返回所有找到的元素,无论找到几个,都返回数组格式。这种方法比较全能,不管什么属性都可以准确地找到。

var dqs1 = document.querySelectorAll("#div1 li");

【查看\设置属性节点】

1、 查看属性节点:.getAttribute("属性名");

2、 设置属性节点:.setAttribute("属性名","属性值");

注意事项:.setAttribute() 在老版本IE中会存在兼容性问题,可以使用.符号代替。

【JS修改CSS的多种方式】

1、 使用setAttribute设置class和style。

document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");

2、使用.className添加一个class选择器。

document.getElementById("first").className = "class1";

3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。

document.getElementById("first").style.fontSize = "18px";

4、 使用.style 或 .style.cssText 添加一串行级样式:

// IE不兼容
document.getElementById("first").style = "color:red;"; 
//所有浏览器兼容
document.getElementById("first").style.cssText = "color:red;";

【查看/设置文本节点】

1、.innerHTML: 取到或设置一个节点中的HTML代码。

2、.innerText: 取到或设置一个节点中的文本,不能设置HTML代码。

二、层次节点操作

1. .childNodes: 获取当前节点的所有子节点(包括元素节点和文本节点)。

.children: 获取当前节点的所有元素子节点(不包含文本节点)。

2. .parentNode: 获取当前节点的父节点。

3. .firstChild: 获取第一个子节点,包括回车等文本节点;

.firstElementChild: 获取第一个元素节点。 不含文本节点;

.lastChild: 获取最后一个子节点,包括回车等文本节点;

.lastElementChild: 获取最后一个子节点,不含文本节点;

4. .previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;

.previousElementSibling: 获取当前节点的前一个元素兄弟节点;

.nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;

.nextElementSibling:获取当前节点的后一个元素兄弟节点;

5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。

【创建并新增节点】

1. document.createElement("标签名"): 创建一个新节点,并将创建的新节点返回。

需要配合.setAttribute()为新节点设置属性。

2. 父节点.insertBefore(新节点,目标节点): 在父节点中,将新节点插入到目标节点之前。

父节点.appendChild(新节点): 在父节点的内部最后,插入一个新节点。

3. 源节点.cloneNode(true): 克隆一个节点。

传入true表示克隆源节点以及源节点的所有子节点;

传入false或不传,表示只克隆当前节点,而不克隆子节点。

【删除、替换节点】

1. 父节点.removeChild(子节点): 从父节点中,删除指定子节点。

2. 父节点.replaceChild(新节点,老节点): 从父节点中,用新节点替换老节点。

Javascript 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
vue构建单页面应用实战
Apr 10 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
WebSocket的通信过程与实现方法详解
Apr 29 #Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
在vscode里使用.vue代码模板的方法
Apr 28 #Javascript
JS实现的透明度渐变动画效果示例
Apr 28 #Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 #Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 #Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP也可以?成Shell Script
2006/10/09 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php异常处理方法实例汇总
2015/06/24 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
原生js开发的日历插件
2017/02/04 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
js实现搜索栏效果
2018/11/16 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python基础教程之五种数据类型详解
2017/01/12 Python
Python subprocess库的使用详解
2018/10/26 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python中round函数如何使用
2020/06/19 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
医疗专业毕业生求职信
2014/08/28 职场文书
大学军训口号大全
2015/12/24 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python