学习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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
js子页面获取父页面数据示例
May 15 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
create-react-app开发常用配置教程
Jun 25 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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Vue2 模板template的四种写法总结
2018/02/23 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python手写均值滤波
2020/02/19 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
学习十八大标语
2014/10/09 职场文书
南京大屠杀观后感
2015/06/02 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
关于车尾的标语大全
2015/08/11 职场文书