参考资料：

　　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. datatables中columns.render的使用

    可直接在columns申明中对应列下方使用render改变该列样式 也可单独在columnsDefs中用targets指定目标. "render":function(data,ty ...

  2. cronolog日志切割

    1. 下载安装 cronolog,它的主页 http://cronolog.org . 下载的是源码,安装过程就是 ./configure, make, make install,最后一步可直接把 s ...

  3. Linux内存管理原理【转】

    转自:http://www.cnblogs.com/zhaoyl/p/3695517.html 本文以32位机器为准,串讲一些内存管理的知识点. 1. 虚拟地址.物理地址.逻辑地址.线性地址 虚拟地址 ...

  4. Zero_qiqi DIV模式的省市区三级联动

    1].[代码] [HTML]代码 跳至 [1] [2] [3] [4] [5] [6] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  5. Linux中查找最耗性能的JAVA代码

    在这里总结一下查找Linux.Java环境下最耗CPU性能的代码段的方法.基本上原理就是使用top命令查看最耗cpu的进程和线程(子进程).使用jstack把java线程堆栈给dump下来.然后,在堆 ...

  6. UVA 12950 ： Even Obsession（最短路Dijkstra）

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  7. 对Discuz的简单认识

    Discuz是php的一个开源论坛系统,是由康盛创想公司2004开发,从Discuz! 1.0到 现在的Discuz X3,无论从功能上还是从用户体验上,都达到了一个质的飞越.主要包括论坛.门户.群组 ...

  8. Houdini Krakatoa Render Plugin

    HDK真实个混蛋,都懒得写个解释.凭着函数英文意思猜测.. plugin sample video: 在极其残忍的开发环境,"Particle Voxel Render" 产生了( ...

  9. 学习JS中的小问题

    1.如果载入的2个js文件中有重名函数,那么调用的时候怎么分别调? 第二个文件载入无效. 2.checkbox jQuery对象的checked属性在选中时为checked,否则为undefined: ...

  10. 【转】Firefox快捷键

    转载地址: http://www.douban.com/note/140139119/ Ctrl + 数字键来打开第N个标签页这种还要先数完再到键盘上找数字Ctrl + Page Up = 激活左边一 ...