`
phoebird
  • 浏览: 117706 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JavaScript高级程序设计 学习笔记之DOM基础(一)

    博客分类:
  • web
阅读更多
1. createElement 、createTextNode、appendChild 用法<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            function createMessage(){
                var oP=document.createElement("p")//创建元素p
                var oText=document.createTextNode("HELLO WORLD")//创建文本
                oP.appendChild(oText)//将文本添加到元素
                document.body.appendChild(oP)//将元素添加到主体内容内,作为body内元素显示
            }
        </script>
    </head>
    <body  onload="createMessage()">
   </body>
显示如下:
HELLO WORLD

2、removeChild、getElementsByTagName
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            function removeMessage(){
                //获取body下第一个为p元素为节点
                var oP=document.body.getElementsByTagName("p")[0];//返回一个NOde
              //  document.body.removeChild(oP);//移除p元素及其文本内容
                //可以替换成下面,效果一样,推荐用下面的方式
                oP.parentNode.removeChild(oP);//寻找到p节点的父节点,再删除p节点
            }
        </script>
    </head>
    <body  onload="removeMessage()">
        <p>hello world</p>
   </body>
</html>
显示空白
分享到:
评论

相关推荐

    JavaScript高级程序设计 学习笔记之DOM基础(五)

    这篇学习笔记主要围绕DOM基础展开,涵盖了JavaScript操作DOM的各种方法和技术。 在JavaScript中,DOM被视为一个树形结构,其中每个节点代表了页面上的一个元素、属性或文本。DOM的基础主要包括以下几个方面: 1. *...

    JavaScript高级程序设计2,学习笔记---第一篇

    这篇学习笔记将带你探索JavaScript的核心概念,包括变量、数据类型、控制流、函数、对象和类等,这些都是构建复杂应用程序的基础。 首先,我们要了解JavaScript的基础语法。在JavaScript中,变量是存储数据的容器,...

    HTML5高级程序设计学习笔记

    ### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中,为了更好地组织页面内容并增强语义性,引入了一系列新的结构标签,这些标签不仅能够帮助开发者更清晰地定义页面的不同部分,同时也为搜索...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程,这些都是学习JavaScript时至关重要的知识点。 首先,基础语法是JavaScript学习的基石。包括变量声明(var、let、const)、数据类型(如...

    Javascript高级程序设计---笔记.pdf

    以上只是JavaScript高级程序设计中的一部分内容,实际的学习笔记会更深入地探讨这些主题,包括异常处理、作用域链、闭包、异步编程(如回调函数、Promise、async/await)、模块系统(CommonJS、ES modules)、正则...

    《JavaScript程序设计》笔记(基础1)

    JavaScript程序设计的基础篇涵盖了编程语言的基本概念和基础知识,这些概念和知识是进一步学习JavaScript深入内容的前提和基础。了解和掌握这些知识点,对于前端开发工程师的学习和工作至关重要。随着前端技术的不断...

    毕设&课设&项目&实训-基于JavaScript高级程序设计第四版的学习笔记.zip

    这本“JavaScript高级程序设计第四版”的学习笔记涵盖了JavaScript的各个方面,旨在帮助学生、开发者以及对编程感兴趣的人深入理解这一强大的脚本语言。这份笔记是针对毕设、课设、项目实训等实践性学习场景编写的,...

    Javascript高级程序设计---笔记归类.pdf

    这份“JavaScript高级程序设计---笔记归类.pdf”文档显然详细整理了JavaScript的关键知识点,包括ECMAScript规范、DOM操作、数据类型、运算符、流程控制语句、函数以及面向对象编程等。 首先,ECMAScript是...

    JavaScript练习程序学习笔记.rar

    这份“JavaScript练习程序学习笔记”很可能包含了一系列的代码示例、学习心得和常见问题解答,旨在帮助学习者深入理解和掌握JavaScript编程。 在JavaScript的学习过程中,首先会接触到基础语法,包括变量声明(var...

    JavaScript高级程序设计 DOM学习笔记

    根据给定的文件信息,以下是关于JavaScript中DOM(文档对象模型)的相关知识点详解: DOM是文档对象模型(Document Object Model)的缩写,它是一个跨平台的接口,由W3C...掌握DOM操作是进行前端开发的必备技能之一。

    Javascript权威指南学习笔记二

    ### JavaScript权威指南学习笔记二:客户端JavaScript #### 第十二章:Web浏览器中的JavaScript ##### 一、Web浏览器环境 在客户端JavaScript中,浏览器提供了一个特定的执行环境,其中`window`对象扮演着至关...

    javascript学习笔记1

    ### JavaScript 学习笔记1:数组、DOM与BOM简要总结 #### 数组方法概述 在JavaScript中,数组是一种非常重要的数据结构,用于存储多个值。数组对象提供了多种方法来帮助我们操作数组中的元素。 - **pop()**:从...

    对javascript的一点点认识总结《javascript高级程序设计》读书笔记

    在深入探讨JavaScript编程语言之前,...在《JavaScript高级程序设计》这本书中,作者深入探讨了这些概念,并提供了一系列实用的编程技巧和最佳实践,这对于任何希望深化JavaScript知识的开发者来说都是一份宝贵的资源。

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...

    JavaScript DOM编程艺术(中文第二版)学习笔记

    JavaScript,作为使网页具备交互能力的程序设计语言,是DOM操作的核心。 动态HTML(DHTML)是HTML、CSS和JavaScript三者的结合,它允许开发者创建具有交互性和动态效果的网页。HTML负责标记网页内容,CSS则用来设置...

    网页程序设计笔记-HTML,JavaScript,CSS,Ajax

    网页程序设计是一门涵盖多个关键技术领域的综合学科,主要包括HTML(超文本标记语言...总的来说,这个压缩包提供了一个全面的网页程序设计学习路径,涵盖了从基础到高级的关键技术,适合希望进入网页开发领域的学习者。

    传播智客扬中科老师讲的DOM 学习笔记

    根据给定的文件信息,我们可以总结出以下关于DOM(Document Object Model)操作的关键知识点...同时,对`this`关键字和事件模型的理解,是构建复杂用户界面的基础,有助于开发者设计出既美观又功能强大的Web应用程序。

Global site tag (gtag.js) - Google Analytics