参考资料：

　　1. http://www.w3school.com.cn/js/js_htmldom.asp

　　2. http://www.runoob.com/htmldom/htmldom-tutorial.html

　　☂ 知识点：

　　☞ HTML DOM定义了访问和操作HTML和XML文档的标准方法。

　　☞ W3C DOM标准分3个不同的部分：1. 核心DOM - 针对任何结构化文档的标准模型。

　　　　　　　　　　　　　　　　　　  2. XML DOM - 针对XML文档的标准模型。

　　　　　　　　　　　　　　　　　　  3. HTML DOM - 针对HTML文档的标准模型。

　　☞ HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

　　　　　　　　　　　　　　　　图1　　DOM树

  • 改变HTML输出流

在Javascript中，document.write()可用于直接向HTML输出流写内容。

<!DOCTYPE html>

<html>

<body>

<script>

　　document.write(Date());

</script>

</body>

</html>
  • 改变HTML内容
document.getElementById(id).innerHTML=new HTML
  • 改变HTML属性
document.getElementById(id).attribute=new value
  • 改变HTML样式
document.getElementById(id).style.property=new style
  • 创建新的HTML元素
<div id="div1">

<p id="p1">段落1</p>

<p id="p2">段落2</p>

</div>

<script>

　　var para=document.createElement("p");

　　var node=document.createTextNode("段落3");

　　para.appendChild(node);

　　var element=document.getElementById("div1");

　　element.appendChild(para);

</script>
  • 删除已有的HTML元素
<div id="div1">

<p id="p1">段落1</p>

<p id="p2">段落2</p>

</div>

<script>

　　var parent=document.getElementById("div1");

　　var child=document.getElementById("p1");

　　parent.removeChild(child);

</script>
  • 事件
<h1 onclick="this.innerHTML='This is a test.'">Click me now!</h1>
<h1 onclick="changetext(this)">Click me now!</h1>

使用DOM添加事件

<script>

　　document.getElementById("bt").onclick=function(){displayDate()};

</script>

JS学习笔记（五） HTML DOM的更多相关文章

  1. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  2. Node.js学习笔记(五) --- 使用Node.js搭建Web服务器

    1. Node.js 创建的第一个应用 1.引入http模块 var http = require("http"); 2. 创建服务器接下来我们使用 http.createServ ...

  3. JS学习笔记 (五) 函数进阶

    1.函数基础 1.1 函数的基本概念 函数是一段JavaScript代码,只被定义一次,但是可以被调用或者执行许多次.函数是一种对象,可以设置属性,或调用方法. 函数中的参数分为实参和形参.其中,形参 ...

  4. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  7. JS学习笔记5_DOM

    1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...

  8. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  9. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  10. 系列文章--Node.js学习笔记系列

    Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...

随机推荐

  1. 160930、Javascript的垃圾回收机制与内存管理

    一.垃圾回收机制-GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...

  2. How To Create a SSL Certificate on Apache for CentOS 6

    About Self-Signed Certificates 自签证书.一个SSL证书,是加密网站的信息,并创建更安全的链接的一种方式.附加地,证书可以给网站浏览者显示VPS的的身份证明信息.如果一个 ...

  3. 编译器 perforSelecter时 警告去除

    #pragma clang diagnostic push #pragma clang diagnostic ignored "-Warc-performSelector-leaks&quo ...

  4. oracle VS postgresql系列-行列转换

    [需求]例如先有数据为 id | name ------+--------- | lottu | xuan | rax | ak | vincent 现在需要转换为 id | names ------ ...

  5. JavaScript push()和splice（）方法

    JavaScript push() 方法 定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newele ...

  6. 每日一九度之 题目1031：xxx定律

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6870 解决:4302 题目描述:     对于一个数n,如果是偶数,就把n砍掉一半:如果是奇数,把n变成 3*n+ 1后砍掉一半,直到该数 ...

  7. 计算机学院大学生程序设计竞赛（2015’12）Polygon

    Polygon Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  8. JQuery-遮罩层

    HTML <html> <head> <link href="StyleSheet.css" rel="stylesheet" t ...

  9. JAVA基础知识之JVM-——自定义类加载器

    JVM中除了根加载器之外其他加载器都是ClassLoader的子类实例, 可以通过扩展ClassLoader的子类,通过重写方法来实现自定义的类加载器. ClassLoader中有两个关键的方法如下, ...

  10. Java中数组的特性

    转载:http://blog.csdn.net/zhangjg_blog/article/details/16116613 数组是基本上所有语言都会有的一种数据类型,它表示一组相同类型的数据的集合,具 ...