方法  描述
var newP=createElement("p"); 创建了一个p标签，p也可替换为div，span等

var oldTxt=createTextNode("this is old text");

 创建文本节点，创建了内容为“this is old text”的文本
newP.appendChild(newTxt); 向p标签中插入定义好的newTxt变量
newP.removeChild(newTxt); 删除刚刚插入的文本内容

var newTxt=createTextNode("this is new text");

newP.replaceChild(newTxt，oldTxt)

 替换节点，返回文本内容为”this is new text"的p元素

下面是一个初始页面：

这里是修改之后页面：

分析一下：

1.删除了标题元素

2.将图片替换成了文本

3.添加一个内容为The End的新元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    //删除标题，我们需要先找到标题元素
    window.onload=function(){
        var hdr1=document.getElementById("hdr1");
        //通过它自身找到它的父元素,进而删除它自身
        hdr1.parentNode.removeChild(hdr1);
        //下面我们需要把图片替换成文本
        //找到图片元素
        var img1=document.getElementById("img1");
        //创建一个文本节点
        var newTxt=document.createTextNode("new text node");
        //进行替换
        img1.parentNode.replaceChild(newTxt, img1);
        //添加新元素
        //首先要创建一个新元素
        var newDiv=document.createElement("div");
        //为其添加内容
        newDiv.innerHTML="<h1>The End</h1>";
        //向页面中添加div元素
        document.body.appendChild(newDiv);
    }
    </script>
</head>
<body>
    <div id="div1">
        <h1 id="hdr1">Header</h1>
        <p id="p1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <p id="p2">
        Second paragraph with image.     <img id="img1" src="wp_b0.jpg" alt="">
    </p>
</body>
</html>

document对象相关的几个常用的方法的更多相关文章

  1. document对象常用属性

    转载请注明来源:https://www.cnblogs.com/hookjc/ 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写    否则会提示你一个错误信息 " ...

  2. DOM中document对象的常用属性方法

    每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返 ...

  3. js基础之DOM中document对象的常用属性方法

    -----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.an ...

  4. Javascript学习8 - 脚本化文档(Document对象)

    原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...

  5. BOM对象，math对象document对象的属性和操作和 事件的基本操作

    Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...

  6. JavaScript (JS)基础：BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  7. 报表软件JS开发引用HTML DOM的location和document对象

    上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

  8. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  9. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

随机推荐

  1. C#做的颜色工具

    常常会用到绘制以及配色,每次看到 framework 里边的 KnowColor.xxx 我就一阵......到底啥颜色啊,干脆做一个一劳永逸的工具吧.功能包含: 可以实现枚举所有系统颜色 圆形.矩形 ...

  2. 小菜的SharePoint Tips

    07. 设计模式应用案例(下) 前文用C#代码实现了Facade模式.Adapter模式.Strategy模式.Bridge模式和Abstract Factory模式解决实际业务需求.本文将继续以C# ...

  3. NSSortDescriptor(数组排序)

    如果数组里面的每一个元素都是一个个model,例如 DepartsDate.h文件 [plain] view plaincopy #import <Foundation/Foundation.h ...

  4. wxWidgets的安装编译、相关配置、问题分析处理

    wxWidgets的安装编译.相关配置.问题分析处理 一.介绍部分 (win7 下的 GUI 效果图见 本篇文章的最后部分截图2张) wxWidgets是一个开源的跨平台的C++构架库(framewo ...

  5. C Socket初探

    C Socket初探 前段时间写了个C# Socket初探,这次再写个C语言的Socket博文,运行效果如下: 实现步骤: 1. Server端 #include <stdio.h> // ...

  6. create OpenVPN on ubuntu12.04

    ---恢复内容开始--- 最近比较火的有digitalocean  的SSD VPS,配置还不错.每个月5刀,512MB内存,CPU被虚拟过.不是KVM.链接能量也不大. 节点在西雅图,对环太平洋比较 ...

  7. struts2中token的令牌机制

    通常在普通的操作当中,我们不需要处理重复提交的,而且有很多方法来防止重复提交.比如在登陆过程中,通过使用redirect,可以让用户登陆之上重定向到后台首页界面,当用户刷新界面时就不会触发重复提交了. ...

  8. computer专业术语总结

    计算机专业真可谓是博大精深,光语言就有N多种,而且各种算法计数,各个领域,加之新技术的不断出现, 如果想要穷尽 计算机的知识,那绝对是不那个可能的,只能在若干领域才能取得一定的成果,但是多了解一些专业 ...

  9. java模式之装饰模式

    1. 什么叫装饰模式? 根据业务的需求,需要对一个类的方法进行增强的处理. 2. 为什么需要装饰模式? 拓展性更加的好,当觉得这个装饰不好的时候,可以直接拿下,不需要改变任何的代码. 3. 装饰模式的 ...

  10. Android屏幕适配问题详解

    上篇-Android本地化资源目录详解 :http://www.cnblogs.com/steffen/p/3833048.html 单位: px(像素):屏幕上的点. in(英寸):长度单位. mm ...