学习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实现带二级菜单的导航示例
Apr 28 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
jQuery实现滚动效果
Nov 17 jQuery
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
vue权限问题的完美解决方案
May 08 Javascript
详解javascript void(0)
Jul 13 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
php获取系统变量方法小结
2015/05/29 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Born鞋子官网:Born Shoes
2017/04/06 全球购物
社区八一活动方案
2014/02/03 职场文书
音乐教育感言
2014/03/05 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
工作失职自我检讨书
2015/05/05 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
2019思想汇报范文
2019/05/21 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫