方法  描述
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. cookie和session详解[转]

    文章链接: http://aijezdm915.iteye.com/blog/1272530 cookie.session 都是用来保存用户状态信息的一种方法或手段 二者主要区别是:         ...

  2. MongoDB的.Net驱动

    mongo的驱动主要使用了两个,即samus和官方驱动. 个人感觉差别不大,且官方驱动也支持了LinQ.但在使用DBRef的时候,发现samus的驱动似乎不太好用,并没有达到想要的效果,也许是我的使用 ...

  3. Linux下搭建Nginx+MySQL+PHP

    在CentOS6.3下实践通过. 1.关闭防火墙 [root@CentOS ~]# chkconfig iptables off 2.关闭selinux vi /etc/sysconfig/selin ...

  4. 应用程序入口 WSGIHandler

    Django 源码小剖: 应用程序入口 WSGIHandler WSGI 有三个部分, 分别为服务器(server), 应用程序(application) 和中间件(middleware). 已经知道 ...

  5. window.parent与window.opener的区别

    有这样一个需求,弹出一个新窗口 并从该新页面的select选择框中选择需要的类别,再返回到之前的父窗口页面的某个文本框中.这里就要用到window.parent和window.opener 如题两种方 ...

  6. Mocking framework

    [译] 什么是Mocking framework?它有什么用? 原位地址:http://codetunnel.com/blog/post/what-is-a-mocking-framework-why ...

  7. DES加密解密 与 Cookie的封装(C#与js互相加密解密)

    2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)   这次实现了JS端的DES加密与解密,并且C#端也能正确解析DES的密文(反之也实现了) 使用的代码如下,非常方 ...

  8. TCP/IP详解学习笔记- 概述

    TCP/IP详解学习笔记(1)-- 概述1.TCP/IP的分层结构      网络协议通常分不同层次进行开发,每一层分别负责不同的同信功能.TCP/IP通常被认为是一个四层协议系统.      如图所 ...

  9. MSSQL Rebuild(重建)索引

    MSSQL Rebuild(重建)索引 前的项目是做数据库的归档,在每次archive后都需要对原数据库的索引进行rebuild,以减少索引碎片,于是乎就自己写了一段sql: DECLARE @tab ...

  10. About Spring

    “Spring is the most popular application development framework for enterprise Java.”这是Spring官方首页上的第一句 ...