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描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
随机推荐
- 浮动框控制及切换、banner随机数js
1.浮动置控制及切换 <div class="banner1"></div><div class="bot_banner"> ...
- sql float 转换为 nvarchar
INSERT INTO CC11 SELECT convert(nvarchar(30),convert(decimal(11,0),PCTID)),convert(nvarchar(30),conv ...
- 搭建mysql5.626及如何去官网下载历史版本数据库
MySQL官网下载历史版本 网上搜索MySQL官网 2 查询所有的归档文件 点击进入服务器列表 列表中默认只有Windows 版本的,可选择其它版本,但无法进行查询 查看网页元素 发现 ...
- O365 "打开或关闭脚本"功能
博客地址:http://blog.csdn.net/FoxDave 自定义功能是 SharePoint Online 最具吸引力的功能之一,因为它使管理员和用户可以调整网站和页面的外观以满足组织目 ...
- [深入Python]Python的私有变量
Python没有真正的私有变量.内部实现上,是将私有变量进程了转化,规则是:_<类名><私有变量> 下面的小技巧可以获取私有变量: class Test(object): de ...
- 转载--JAVA读取文件最佳实践
1. 前言 Java应用中很常见的一个问题,如何读取jar/war包内和所在路径的配置文件,不同的人根据不同的实践总结出了不同的方案,但其他人应用却会因为环境等的差异发现各种问题,本文则从原理上解释 ...
- php 得到一个文件夹下的所有文件,包括子文件中的文件
$dir = FCPATH."uploads/attachment/"; $this->getFiles($dir); function getFiles($dir) { $ ...
- javaweb--struts框架--struts.xml
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC "-/ ...
- HRBUST 1867 差分+BIT
我在群上看到的某道题,貌似用的是线段树,因为前几天遇到差分,再用BIT动态维护一下前缀和,感觉可做就A了. 加了个读优就Rank1啦! 某个不常见的题库,还是把题目拿下来把.. Description ...
- Javascript 事件对象(二)event事件
Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...