文档章节

HTML DOM学习笔记

久伴旧伴
 久伴旧伴
发布于 2016/12/06 17:04
字数 764
阅读 4
收藏 0
点赞 0
评论 0

1.W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

 

2.在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
 

3.节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

 

4.几个粟子

 

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>

 

从上面的 HTML 中:

  • <html> 节点没有父节点;它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点

并且:

  • <html> 节点拥有两个子节点:<head> 和 <body>
  • <head> 节点拥有一个子节点:<title> 节点
  • <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
  • <h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点

并且:

  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点

 

5.HTML DOM 对象 - 方法和属性

一些常用的 HTML DOM 方法:

  • getElementById(id) - 获取带有指定 id 的节点(元素)
  • appendChild(node) - 插入新的子节点(元素)
  • removeChild(node) - 删除子节点(元素)

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点

 

 

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

 

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

 

创建新的 HTML 元素

如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p”);//建立一个p标签
var node=document.createTextNode("This is new.”);//建立一个节点内容
para.appendChild(node);//添加到标签上

var element=document.getElementById("d1");
element.appendChild(para);//追加到div里面
</script>

 

按钮被点击时改变 <body> 元素的背景色:

<body>

 

<input type="button"

onclick="document.body.style.backgroundColor='lavender';"

value="改变背景色">

 

</body>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

© 著作权归作者所有

共有 人打赏支持
久伴旧伴
粉丝 4
博文 19
码字总数 6522
作品 0
沧州
程序员
前端的学习

html笔记; 技术点关键词: DOM 标签元素 标签类型 节点 样式 属性 不同浏览器支持的差异性(很小一部分) 框架布局 弹窗 浮动 js笔记; 技术点关键词: 变量 方法 参数 对象 触发和调用 异步数据交...

noteman ⋅ 2015/12/14 ⋅ 0

第一章--JavaScript简介

1. JavaScript的构成 1.1. ECMAScript ECMAScript规定了核心语言的组成部分分别为:语法、类型、语句、关键字、保留字、操作符、对象。 宿主环境:Web浏览器、Node、Adobe Flash。 1.2. DOM...

lovewt ⋅ 06/05 ⋅ 0

Range的学习笔记

介绍DOM标准的Range和IE标准的Range。前者针对节点,后者针对文本。虽然少用,但可以了解下。

前端届的科比 ⋅ 2014/11/24 ⋅ 0

jQuery 学习笔记

jQuery是一个快,小且功能强大的js库。它使如HTML文档遍历和操作,事件处理,动画和Ajax更加简单在众多浏览器中。 具有通用性和扩展性,jQuery已经改变了许多人编写JS的方式。 Core jQuery(...

Rksi5 ⋅ 2014/05/10 ⋅ 0

JavaScript 学习笔记9

第十三章 1.事件流 JavaScript和html的交互通过事件来实现 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。 DOM2事件流:事件捕获阶段——>处于目标阶段——>事件冒泡阶段 事件捕获...

candy-chocolate ⋅ 2016/11/14 ⋅ 0

d3.js学习笔记(未完待续)

d3.js和jQuery一样,是链式语法。 d3.js常用方法: 1. d3.select():使用CSS选择器语法从DOM中选择单一元素。 如:d3.select("body"); 2. d3.selectAll():选择所有符合要求的元素。 如:d3....

小微 ⋅ 2013/03/15 ⋅ 5

【zepto学习笔记01】核心方法$()

前言 我们移动端基本使用zepto了,而我也从一个小白变成稍微靠谱一点的前端了,最近居然经常要改到zepto源码 但是,我对zepto不太熟悉,其实前端水准还是不够,所以便私下偷偷学习下吧,别被...

panpanhtai ⋅ 2014/07/09 ⋅ 0

AngularJs学习笔记--concepts(概念)

启动(Startup) 下面描述angular是如何启动的(参考图表与下面的例子): 1. 浏览器加载HTML,将HTML标签转换为DOM对象; 2. 浏览器加载angular.js的脚本; 3. Angular等待DOMContentLoade...

武文海 ⋅ 2015/02/06 ⋅ 0

AngularJS 学习笔记---Scope

What are Scopes? Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic t......

恋空御月 ⋅ 2016/05/30 ⋅ 0

WEB前端学习javascript学习笔记

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 16分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 18分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 23分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 27分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 27分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 28分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 29分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 35分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 38分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 42分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部