本文档参考菜鸟教程：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. WKWebView 加载本地HTML随笔

    一天的时间 解决两个坑~~ 1.加载不出来本地HTML 的JS  CSS 样式,问题是引用到项目中 是用的group 这个是错的 直接上图 就知道了 像上图一样,加入相对路径即可,因为如果使用了gro ...

  2. C# 图片处理方法 整理汇总

    /// <summary> /// 图片转为base64编码字符 /// </summary> /// <param name="path">图 ...

  3. 关于delete和delete[]的区别

    在C++动态内存分配中我们常用到new和delete两种操作,new用来申请内存,delete用来释放内存.那么问题来了,我们应该用delete来释放内存还是用delete[]来释放内存呢? 为了得到 ...

  4. Windows10下搭建Android Studio3.12开发环境

    1.准备工作: 操作系统:Windows10 专业版或企业版 JDK安装:参考文章 http://www.cnblogs.com/yuwentao/p/4742575.html =========== ...

  5. C# winform 打开主界面并关闭登录界面

    在winform 界面编程中,我们有时候要在主界面打开之前先显示登录界面,当登录界面用户信息校验正确后才打开主界面,而这时登陆界面也完成使命该功成身退了. 目前有两种方法可实现: 方法1. 隐藏登录界 ...

  6. Python Json & Pickle模块

    用于序列化的两个模块 Json,用于字符串 和 python数据类型间进行转换 Pickle,用于python特有的类型 和 python的数据类型间进行转换 Json模块提供了四个功能:dumps. ...

  7. [转]使用python爬取东方财富网机构调研数据

    最近有一个需求,需要爬取东方财富网的机构调研数据.数据所在的网页地址为: 机构调研 网页如下所示: 可见数据共有8464页,此处不能直接使用scrapy爬虫进行爬取,因为点击下一页时,浏览器只是发起了 ...

  8. jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选

    最近在做项目的过程中碰到了这样的一个问题:在使用bootstrap模态框的过程中,在模态框中有一个checkbox标签,一开始是为选中的,当点击触发模态框按钮,选中chcekbox时,会显示勾选,这个 ...

  9. 游戏数据分析中“次日留存率”与“游戏生命周期第N天上线率”的SAS实现

    在游戏行业,次日留存率是个很重要的指标,对于评价一款游戏的优劣具有很重要的参考价值. 下面先看以下相关的定义: 用户留存:统计时间区间内,新登用户在随后不同时期的登录使用情况. 日次留存率:日新登用户 ...

  10. 红米note3发热严重，小米真垃圾！

    红米note3全网通高配版,高通处理器骁龙650(MSM8956),夏天在有空调的房间,上网几分钟手机发烫,真垃圾! ROM已经是官方最新稳定版.MIUI8.5.2.0(LHNCNED) 红米NOTE ...