本文档参考菜鸟教程：http://www.runoob.com/htmldom/htmldom-tutorial.html

前提：

DOM  Document Object Model（文档对象模型）的缩写

DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

一、HTML DOM是什么？

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

二、HTML DOM 的组成（5个部分：节点、方法、属性、事件、控制台对象）

2.1 节点

HTML  DOM 以树结构表达 HTML 文档。

HTML DOM对HTML文档结构为五种类型的节点： 文档节点（document）、2 元素节点、3 属性节点、4 文本节点、5 注释节点

2.2 方法：对元素节点的操作

2.3 属性：对属性节点和文本节点的操作。

2.4 事件：此处是HTML DOM ，此处的DOM事件也就是HTML事件：所有事件：http://www.runoob.com/jsref/dom-obj-event.html

注意：DOM属性节点和CSS样式不是一个东西！！！ 对CSS样式操作：document.getElementById("p2").style

二、有哪些功能(知识例举几个常用的，全部的请看文章结束部分有链接！！！！)

三 、示例代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p name="intro" id="intro">Hello World!</p>

<script>

//新建元素节点

//var test=document.createElement("div");

//添加元素节点

var test=document.createElement("div");

//新建文本节点

//var node=document.createTextNode("这是一个新段落。");

//获取元素节点

//var test=document.getElementById("intro");

//var test=document.getElementsByTagName("intro");

//var test=document.getElementsByClassName("intro");

//

alert(test);

//

//txt=document.getElementById("intro").childNodes[0].nodeValue;

//document.write(txt);

</script>

四、HTML DOM 各个组成部分到底有哪些方法？？？  http://www.runoob.com/jsref/obj-console.html

HTML DOM学习的更多相关文章

  1. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  2. HTML DOM 学习

    HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...

  3. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

  4. Js dom 学习

    节点类型 文档节点: 一棵DOM树的顶端是文档节点,它呈现为整个页面(相当于document对象),当需要访问任何元素.属性或文本节点时,都需要通过文档节点来进行导航.(document.) 元素节点 ...

  5. Dom学习笔记

    今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...

  6. JavaScript DOM学习总结（二）

    获取和设置属性 DOM实在是个好东西,掌握了它我们不仅可以在JavaScript中使用,其它程序语言我们同样可以使用. 接下来就一起使用DOM来干些实事吧! 1.getAttribute getAtt ...

  7. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  8. HTML DOM学习之三

    1.创建新的HTML元素:appendChild(); 如需向HTML DOM添加元素,首先必须创建该元素,然后把它追加到已有的元素上: <div id="div1"> ...

  9. HTML DOM学习之二

    1.HTML DOM属性: **innerHTML属性-获取元素内容的最简单方法是使用innerHTML属性,innerHTML属性对于获取或替换HTML元素的内容很有用 <html> & ...

  10. HTML DOM学习之一

    1.HTML DOM定义了访问和操作HTML文档的标准方法:DOM以树型结构表达了HTML文档: 2.DOM是W3C的标准,定义了访问HTML和XML文档的标准: DOM(文档对象模型)是中立于平台和 ...

随机推荐

  1. webStrom访问只一个很简单的html文件的时候显示local host无法访问。。

    直接从文件夹运行html没问题的,,,然后百度半天,,乱七八糟的答案, 1.谷歌商店安装 JB插件--插件地址 https://chrome.google.com/webstore/detail/je ...

  2. springboot笔记1(转载于puresmile)

    构建微服务:Spring boot 入门篇 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框 ...

  3. Python全栈之路----函数进阶----迭代器

    我们已经知道,可以直接作用于 for 循环的数据类型有以下几种: 一类是集合数据类型,如 list , tuple , dict , set ,str 等: 一类是 generator ,包括生成器和 ...

  4. 2018-2019-2 20165212《网络对抗技术》Exp2 后门原理与实践

    2018-2019-2 20165212<网络对抗技术>Exp2 后门原理与实践 1.实验内容 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作 ...

  5. 安装win10 1703版本操作系统

    1.使用UltraISO 全功能单文件 9.5.3.2900刻录工具,刻录iso文件到U盘里 2.默认刻录之后,U盘分区格式变成了fat32,而fat32单个文件无法超过4GB 而1703版本里面的i ...

  6. CRM项目之stark组件

    . stark也是一个app(用startapp stark创建),目标时把这个做成一个可以拔插的组件 . setting文件下INSTALLED_APPS 路径要配置好(app的注册) . 写好si ...

  7. Docker之数据卷Volume（七）

    一.简介   Docker数据卷(volume)机制.volume是存在于一个或多个容器中的特定文件或文件夹,这个目录以独立于联合文件系统的形式在宿主机中存在,并为数据的共享与持久化提供便利. 1)v ...

  8. golang垃圾回收和SetFinalizer

    golang自带内存回收机制--GC.GC通过独立的进程执行,它会搜索不再使用的变量,并释放.需要注意的是,进行GC会占用机器资源. GC是自动进行的.如果要手动进行GC,可以调用runtime.GC ...

  9. <亲测>centos7通过yum安装JDK1.8(实际上是openjdk)

    centos7通过yum安装JDK1.8   安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |gr ...

  10. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...