学习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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
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
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Django 使用logging打印日志的实例
2018/04/28 Python
python爬取个性签名的方法
2018/06/17 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python多线程使用方法实例详解
2019/12/30 Python
pytorch之添加BN的实现
2020/01/06 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
童装店创业计划书
2014/01/09 职场文书
数学系毕业生的自我评价
2014/01/10 职场文书
工作证明英文模板
2014/10/21 职场文书
放射科岗位职责
2015/02/14 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
redis三种高可用方式部署的实现
2021/05/11 Redis
pytorch 使用半精度模型部署的操作
2021/05/24 Python
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫