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

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

一、DOM树的节点

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

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

【查看元素节点】

1、 使用getElement系列方法:

具体的HTML代码如下图:

//通过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(新节点,老节点): 从父节点中,用新节点替换老节点。

您可能感兴趣的文章:

  • JS中获取 DOM 元素的绝对位置实例详解
  • jQuery中图片展示插件highslide.js的简单dom
  • JS实现访问DOM对象指定节点的方法示例
  • JS实现DOM删除节点操作示例
  • JS实现的DOM插入节点操作示例
  • JS遍历DOM文档树的方法实例详解
  • js中DOM事件绑定分析
  • AngularJS对动态增加的DOM实现ng-keyup事件示例
  • 原生JS实现循环Nodelist Dom列表的4种方式示例
  • JS兼容所有浏览器的DOMContentLoaded事件
(0)

相关推荐

  • JS遍历DOM文档树的方法实例详解

    本文实例讲述了JS遍历DOM文档树的方法.分享给大家供大家参考,具体如下: 一 介绍 遍历文档树通过使用parentNode属性.firstChild属性.lastChild属性.previousSibling属性和nextSibling属性来实现. 1.parentNode属性 该属性返回当前节点的父节点. [pNode=]obj.parentNode pNode:该参数用来存储父节点,如果不存在父节点将返回"null". 2.firstChild属性 该属性返回当前节点的第一个子节

  • JS中获取 DOM 元素的绝对位置实例详解

    在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

  • js中DOM事件绑定分析

    js事件绑定 JavaScript 有三种事件模型: 内联模型 脚本模型 DOM2 模型 1.内联模型 //基本废除不用 <input type="button" value="按钮" onclick="alert('Lee');" /> <input type="button" value="按钮" onclick="box();" /> 2.脚本模型 //基本

  • jQuery中图片展示插件highslide.js的简单dom

    前言 今天用用了一款图片展示插件highslide.js,感觉用起来很是舒畅,几乎不用怎么写代码,只需要知道如何写参数就行了. 那么这么牛叉的插件我们该如何用哪,下面我就跟大家讲解一下. 一.引入 首先我们运用绝对路径引入,这一般都是在实际项目中引用的方法,我们下载时候会有个文件包,里面包含样式文件和脚本文件. 用的时候只需引入这两个文件即可,然后代码中这样写: <link rel="stylesheet" type="text/css" href="

  • JS实现DOM删除节点操作示例

    本文实例讲述了JS实现DOM删除节点操作.分享给大家供大家参考,具体如下: 一 介绍 删除节点通过使用removeChild()方法来实现. removeChild()方法用来删除一个子节点. obj. removeChild(oldChild) oldChild:表示需要删除的节点. 二 应用 删除节点,本示例将通过DOM对象的removeChild()方法,动态删除页面中所选中的文本. 三 代码 <!DOCTYPE html> <html> <head> <t

  • JS实现访问DOM对象指定节点的方法示例

    本文实例讲述了JS实现访问DOM对象指定节点的方法.分享给大家供大家参考,具体如下: 一 介绍 使用getElementById()方法来访问指定id的节点,并用nodeName属性.nodeType属性和nodeValue属性来显示出该节点名称.节点类型和节点值. 1.nodeName属性 该属性用来获取某一个节点的名称. [sName=]obj.nodeName sName:字符串变量用来存储节点的名称. 2.nodeType属性 该属性用来获取某一个节点的类型. [sType=]obj.n

  • JS实现的DOM插入节点操作示例

    本文实例讲述了JS实现的DOM插入节点操作.分享给大家供大家参考,具体如下: 一 介绍 插入节点通过使用insertBefore()方法来实现. insertBefore()方法将在另一个子节点前插入新的子节点. obj.insertBefore(new,ref) new:表示新的子节点. ref:指定一个节点,在这个节点前插入新的节点. 二 应用 插入节点,本示例在页面的文本框中输入需要插入的文本,然后通过单击"前插入"按钮将文本插入到页面中. 三 完整示例代码: <!DOCT

  • AngularJS对动态增加的DOM实现ng-keyup事件示例

    我们经常在网页中看到这种形式的内容,如图: 用鼠标点击一下,就变成了一个input,如图: 如果未输入内容,并且鼠标离开后,则变回了原来的样子:如果输入了内容,即使鼠标离开,也保持内容不变,此时输入回车,则添加内容,并清空输入框. 我在想这个是这么实现的?想了一下有这么一个思路:普通情况下这个是一个div或p元素,点击之后变成一个input元素,鼠标离开则变回原元素.代码(含详细注释版)如下: window.onload = function () { // 页面加载完给id为click-to-

  • 原生JS实现循环Nodelist Dom列表的4种方式示例

    本文实例讲述了原生JS实现循环Nodelist Dom列表的4种方式.分享给大家供大家参考,具体如下: function $(id) { return document.getElementById(id); } var _PAGE = { timeListDom: $('timeList') }; var spanDoms = _PAGE.timeListDom.querySelectorAll('span'), domLen = spanDoms.length; // 第一种方式:原生for

  • JS兼容所有浏览器的DOMContentLoaded事件

    使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中,但window.onload事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会触发此事件,尤其是如果图片量很大的情况下,会严重客户体验.所以很多时候,只需要DOM结构加载完毕即可,jQuery的$(document).ready(function(){})实现此功能,下面介绍一下原生JavaScript如何实现

随机推荐