JS学习笔记（五） HTML DOM
参考资料：
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的更多相关文章
- js学习笔记----JavaScript中DOM扩展的那些事
什么都不说,先上总结的图~ Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...
- Node.js学习笔记(五) --- 使用Node.js搭建Web服务器
1. Node.js 创建的第一个应用 1.引入http模块 var http = require("http"); 2. 创建服务器接下来我们使用 http.createServ ...
- JS学习笔记 (五) 函数进阶
1.函数基础 1.1 函数的基本概念 函数是一段JavaScript代码,只被定义一次,但是可以被调用或者执行许多次.函数是一种对象,可以设置属性,或调用方法. 函数中的参数分为实参和形参.其中,形参 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- 【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- 系列文章--Node.js学习笔记系列
Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- 简介及安装Node.js开发环境 Nodejs学习笔记(二)--- 事件模块 Nodejs学习笔记(三)--- 模块 Nodejs学 ...
随机推荐
- SuperSocket架构设计示意图【转】
转自:http://docs.supersocket.net/v1-6/zh-CN/Architecture-Diagrams 中文(中国)Toggle Dropdown v1.6Toggle Dro ...
- JVM 指令集
指令码 助记符 说明 0x00 nop 什么都不做 0x01 aconst_null 将null推送至栈顶 0x02 iconst_m1 将int型-1推送至栈顶 0x03 iconst_0 将int ...
- PHP弱类型安全问题的写法和步骤
鉴于目前PHP是世界上最好的语言,PHP本身的问题也可以算作是web安全的一个方面.在PHP中的特性就是弱类型,以及内置函数对于传入参数的松散处理.本篇文章主要就是记录我在做攻防平台上面遇到的PHP的 ...
- PHP常用的数组相关处理函数
[数组中常用的多种遍历方式] [for 和 foreach 略] [while() . list() .each() 组合循环遍历数组] each()函数 a. 需要一个数组作为参数 b. 返回来的也 ...
- 微信公众平台消息接口API指南
简介 微信公众平台消息接口为开发者提供了一种新的消息处理方式.微信公众平台消息接口为开发者提供与用户进行消息交互的能力.对于成功接入消息接口的微信公众账号,当用户发消息给公众号,微信公众平台服务器会使 ...
- 使用percona xtradb cluster的IST方式添加新节点
使用percona xtradb cluster的IST(Incremental State Transfer)特性添加新节点,防止新节点加入时使用SST(State SnapShop Transfe ...
- java关于StringBuffer和StringBuilder写入文件的效率问题
StringBuffer在存储字符的时候,是有上限的,一旦达到上线就会出错,自己在项目中遇到一个从数据库中查询数据,然后写入到本地文件中 ,数据量大概有30万条,此时的效率十分的低.下面是大致的模拟该 ...
- C#'~'按位取反运算符的使用
按位取反运算符是按照二进制的每一位取反,比如byte类型,~0的结果就是255. 该功能可以在mask中做一些反转操作 如下代码,a存放了2,4,8三个值.用按位取反'~'运算符反转 打印结果是 fa ...
- ural 1113,jeep problem
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1113 网上的解答铺天盖地.我硬是花了两天才懂了点. wiki上的解释:https://e ...
- CSS之盒子模型
CSS核心内容 源文件目录: D:\Users\ylf\Workspaces\MyEclipse 10 标准流 盒子模型 浮动 定位 标准流/非标准流: 标准流:就是普通的 非标准流:实际工作中要打破 ...