学习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正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
javascript入门教程基础篇
Nov 16 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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 开源AJAX框架14种
2009/08/24 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php7性能提升的原因详解
2019/10/13 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
js实现返回顶部效果
2017/03/10 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
行政助理的岗位职责
2014/02/18 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
初一军训感言
2015/08/01 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书