方法  描述
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. MongoDB：利用官方驱动改装为EF代码风格的MongoDB.Repository框架 二

    本次改动的主要内容是实现MongoDB.Repository对MongoDBRef的支持. MongoDB对一对一,一对多,多对多关系的维护,官方推荐文档嵌入方式,反映到模型的设计如下: public ...

  2. UML类图的常见关系1

    设计模式之UML类图的常见关系(一)   本篇会讲解在UML类图中,常见几种关系: 泛化(Generalization),依赖(Dependency),关联(Association),聚合(Aggre ...

  3. Build FFmpeg for iOS

    FFmpeg Build Instructions MAC 10.8 or better Copy ffmpeg-2.0.tar.bz2 (https://ffmpeg.org/releases/ff ...

  4. C#基础知识回顾--线程传参

    C#基础知识回顾--线程传参 在不传递参数情况下,一般大家都使用ThreadStart代理来连接执行函数,ThreadStart委托接收的函数不能有参数, 也不能有返回值.如果希望传递参数给执行函数, ...

  5. 在路由器上搭建SVN服务器

    在路由器上搭建SVN服务器 SVN托管服务大家都不陌生了,我最早开始用的是谷歌提供的SVN,因为在上面托管的项目都是开源的,所以当有些项目不方便在网上公开的时候,就需要自己搭建SVN服务器了.wind ...

  6. 在Linux Mint13下编译安装mono运行时

    最近一直想体验下mono在web开发上到底进展到什么程度,挑战一下它对web开发的极限.因为asp.net mvc本身依赖windows平台的东西不太多,所以这些assembly移植到mono/lin ...

  7. ajax的分页查询（不刷新页面）

    既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数 ...

  8. Java8：使用Lambda表达式增强版Comparator排序

    学习路上的自我记录-------路好长,就问你慌不慌,大声港,不慌.----jstarseven. 实体类: package com.server.model; /** * Created by js ...

  9. 关于元素加上margin属性后以谁为基准移动的问题及负margin的问题

    突然想起这个问题,这是很基础很基础的问题啊,但之前很多次都忘记了,然后困扰了我很久.不清不楚的感觉很不好,所以要做成笔记比较好记住,好记性不如烂笔头,以后再次困惑了再回来看看.推荐文章,海玉的< ...

  10. grunt--自常用配置文件--js/样式压缩打包，sass工具整合使用

    // Project configuration. module.exports = function(grunt) { // 使用严格模式 'use strict'; // 这里定义我们需要的任务 ...