DOM节点的修改
首先,我们将最后段落赋值给变量my:
var my = document.getElementById('closer');
接下来,我们就能够轻松地通过修改对象的innerHTML值来修改段落中的文本:

由于innerHTML可以接受任何HTML代码串,所以我们也可以用它在当前的DOM树中再新建一个em节点:

除此之外,我们还可以通过修改既定文本类节点的nodeValue属性来实现相关的文本修改。
修改样式
元素对象中有个style属性,这是一个用来反映当前CSS样式的属性。

另外,CSS属性中的短线在JavaScript中是不可用的。对于这种情况,我们只需要直接跳过并将下一个单纯的首字母大写即可。例如,padding-top可以写成paddingTop、margin-left可以写成marginLeft等,以此类推。

新建节点
通常情况下,我们可以用createElement()和createTextNode()这两个方法来创建新节点。而appendChild()方法则可以用来将新节点添加到DOM树结构中。
如果你想将下面的HTML代码加入body元素后端:
<p>one mor paragraph<strong>bold</strong></p>
让我们来看看完成这个代码应该怎么写
//新建一个节点p
var myp = document.createElement('p');
//创建一个文本节点
var myt = document.createTextNode('one more paragraph');
myp.appendChild(myt);
//创建一个strong和另外一个文本节点
var str = document.createElement('strong');
str.appendChild(document.createTextNode('bold'));
myp.appendChild(str);
//添加到body中
document.body.appendChild(myp);
cloneNode()
另外,拷贝现有节点也是一种创建节点的方法。这需要用到cloneNode()方法,该方法有一个布尔类型的参数(true=深拷贝,包括所有子节点;false=浅拷贝,只针对当前节点)。

这时候,我们在页面上不会看出有什么变化,因为浅拷贝只复制了p节点,并没有包含它的任何子节点。这意味着该段落中文本并没有复制过来。但如果我们现在创建的是一份深拷贝,那么以P元素为首的整个DOM子树都将会被拷贝过来。

insertBefore()
通过appendChild()方法,我们只能将新节点添加到指定节点的末端。如果想更精确地控制插入节点的位置,我们还可以使用insertBefore()方法。该方法与appendChild()基本相同,只不过它多了一个额外参数,该参数可以用于指定将新节点插入哪一个元素的前面。
document.body.insertBefore(document.createTextNode('boo!'),document.body.firstChild);
移除节点
想从DOM树中移除一个节点,我们可以调用removeChild()。下面,我们移除第二段落,如果我们稍后还需用到被移除的节点的话,可以保存该方法的返回值。

除此之外,还有一个replaceChild()方法,该方法可以在移除一个节点的同时将另一个节点放在该位置。

删除某个指定节点所有子节点的函数:
function removeAll(n){
while(n.firstChild){
n.removeChild(n.firstChild);
}
}
DOM节点的修改的更多相关文章
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- 深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
- DOM 节点的克隆与删除
无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...
- jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- JavaScript函数使用和DOM节点
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
随机推荐
- mac os 中类似于Linux的yum工具,或ubuntu的apt-get工具Homebrew
Linux下的yum用着真省心! mac下的相类似的软件是Homebrew 使用前需要先安装它, ruby -e "$(curl -fsSL https://raw.githubuserco ...
- Servlet路径跳转2--在servlet当中,跳转到某网页时的路径写法
课程1-13 http://www.imooc.com/video/5554 Servlet路径跳转: 绝对路径:放在任何地方都对的路径 相对路径:相对于当前资源的路径 两种方法:请求重定向,服务 ...
- RoseRT 建模学习
目录: 一.RoseRT理论知识 二.一个完整模型的建立 三.TD-SCDMA(UE侧)RRC层建模的学习 四.LTE的RRC层建模(1.自主完成‘2.也可以是L2) 五.参考文献 一.RoseRT理 ...
- VMware Workstation 10.0.4.2249910 CN
VMware Workstation 10.0.4.2249910.exe Workstation10.0.4修复了微软Windows 8.1和Windows Server 2012操作系统中的内存问 ...
- 黑马程序员——【Java基础】——Java IO流
---------- android培训.java培训.期待与您交流! ---------- 一.IO概述 1.IO:是Input.Output的缩写. 2.特点: (1)用于处理设备间的数据传输. ...
- apache2服务器mod_rewrite模块 开启方法[linux, ubuntu]
在UBUNTU系统中要启用mod_rewrite的方法有两种: 第一种: 在终端中执行 sudo a2enmod rewrite 指 令后,即启用了 Mod_rewrite 模块, apache2服务 ...
- Unit Tests
The Three Laws of TDD First Law : you may not write production code until you have written a failing ...
- C++模板中的函数对象
在C++模板类map中一个参数为Compare类型,该类型为一个比较函数,其完整定义如下: template< class Key, class T, class Compare = std:: ...
- Sublime Text 3安装插件指南
Sublime Text已经很用得很广泛,一般普通的功能已经够用,加入一些插件能些许加快开发. 安装 Package Control 有了插件控制器Package Control安装起来就很轻松了. ...
- canvas实现类似弹窗广告效果
先看看下面的效果图,想想使用canvas是怎样实现的? 如下图: 这个就不详细描述了,看代码就会了. <!doctype html> <html lang="en" ...