1.DOM概述

1.1.        什么是DOM?

    DOM= Document Object Model，文档对象模型， DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分：

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

    XML DOM - 针对 XML 文档的标准模型

    HTML DOM - 针对 HTML 文档的标准模型

 

1.2.        什么是HTML DOM?

 HTML DOM 定义了访问和操作HTML文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）

 当我们用浏览打开一个html文件时, 浏览器内置的HTML解析引擎就会将整个文档加载到内存中, 并根据HTML DOM定义的接口和实现类生成一个包含文件内所有数据的DOM对象树.

<html>

<head>

<title>文档标题</title>

</head>

<body>

<h1>我的标题</h1>

<a href="http://www.atguigu.com">我的链接</a>

</body>

</html>

2.  HTML DOM核心: 节点

2.1.       HTML节点(Node)

  • HTML文档中的每个成分都是一个节点。
  • 整个文档是一个文档节点(Document)
  • 每个 HTML 标签是一个元素节点(Element)
  • 每一个 HTML 属性是一个属性节点(Attribute)
  • 包含在 HTML 元素中的文本是文本节点(Text

2.2.       Node层次

  • DOM中的节点彼此都有等级关系。
  • HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

2.3.       HTML DOM节点树

  •         一棵节点树中的所有节点彼此都是有关系的

    <html>

    <head>

    <title>DOM Tutorial</title>

    </head>

    <body>

    <h1>DOM Lesson one</h1>

    <p>Hello world!</p>

    </body>

    </html>

    父节点

    除文档节点之外的每个节点都有父节点

    子节点

    大部分元素节点都有子节点

    同辈节点

    当节点分享同一个父节点时，它们就是同辈

    后代节点

    后代指某个节点的所有子节点

    先辈节点

    先辈是某个节点的父节点，或者父节点的父节点，以此类推

    3.   DOM操作

  • 3.1HTML DOM访问节点(查询)

  • 对象类型

    属性/方法

    说明

    文档/元素节点

    getElementById(id)

    根据标签的id得到对应的标签对象

    文档/元素节点

    getElementsByTagName(tag)

    根据标签名得到对应的所有子标签对象的集合(数组)

     

    节点

    nodeName

    得到节点名

    节点

    nodeValue

    得到节点的值

    节点

    nodeType

    节点类型值

     

    元素节点

    childNodes

    得到所有子节点的集合(数组)

    元素/文本节点

    parentNode

    得到父节点对象(标签)

    元素节点

    firstChild

    得到第一个子节点(标签/文本)

    元素节点

    lastChild

    得到最后一个子节点(标签/文本)

     

    元素节点

    getAttributeNode(attrName)

    根据属性名标签的属性节点

  • 3.3.       HTML DOM的增删改

  • 对象类型

    属性/方法

    说明

    文档节点

    createElement(tagName)

    创建一个新的元素节点对象

    文档节点

    createTextNode(text)

    创建一个文本节点对象

     

    元素节点

    appendChild(node)

    将指定的节点添加为子节点

    元素节点

    insertBefore(new,target)

    在指定子节点的前面插入新节点

     

    元素节点

    replaceChild(new, old)

    用新节点替换原有的旧子节点

    元素节点

    removeChild(childNode)

    删除指定的子节点

    元素节点

    setAttribute(name, value)

    为标签添加一个属性

    元素节点

    removeAttribute(name)

    删除指定的属性

     

    元素节点

    innerHTML

    向标签中添加一个标签

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>HTML DOM编程测试</title>

    <style type="text/css">

    ul {

    list-style-type: none;

    }

    li {

    border-style: solid;

    border-width: 1px;

    padding: 5px;

    margin: 5px;

    background-color: #99ff99;

    float: left;

    }

    .out {

    width: 400px;

    border-style: solid;

    border-width: 1px;

    margin: 10px;

    padding: 10px;

    float: left;

    }

    </style>

    </head>

    <body>

    <div class="out">

    <p>你喜欢哪个城市?</p>

    <ul id="city">

    <li id="bj" name="BeiJing">北京</li>

    <li>上海</li>

    <li id="dj">东京</li>

    <li>首尔</li>

    </ul>

    <br>

    <div id="inner"></div>

    </div>

    </body>

    </html>

javaScript DOM编程的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  3. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  4. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  5. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  6. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  7. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  8. 《JavaScript DOM 编程艺术》

    前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...

  9. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  10. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

随机推荐

  1. BZOJ 1822 Frozen Nova 冷冻波（最大流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1822 题意:WJJ喜欢“魔兽争霸”这个游戏.在 游戏中,巫妖是一种强大的英雄,它的技能F ...

  2. [转]Unity3D：Gizmos画圆（原创）

    using UnityEngine; using System; public class HeGizmosCircle : MonoBehaviour { public Transform m_Tr ...

  3. Servlet&jsp基础：第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. CSS3关于transition过渡

    第一次写博客,心里竟然有点感动,注册了两个月了,一直不敢写,总觉得这应该是大神交流的地方.今天写的一个css3的一个导航,觉得挺好看,放在网页里,也可以起到一个点睛之笔的作用. 首先写好body标签中 ...

  5. hibernate（三）检索属性配置

    检索即对象的获取:获取的时机和和方式:减少没必要的内存占用,尽量少的sql语句减少多余数据库的访问 一:类级别的检索:load() 和属性<class lazy=true> .无论 < ...

  6. 关于css3的自定义字体

    css3的@font-face属性打破了中文页面字体一成不变的格局,但今天本菜在用的时候并不那么爽.开始各种引用外部ttf文件失败.下了300M+的字体文件,苦逼的试了一下午.终于有一个ttf引用成功 ...

  7. web设计经验<三>值得你深入了解的交互设计5大支柱

    随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了.为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解. 正如同我们在<交互设计最佳实践(卷1)>中所述,要做好交互设计 ...

  8. [转载]VFS—Kernel Space & User Space

    在了解虚拟文件系统之前 , 需要先了解 Kernel Space 和 User Space 的区别 . 二者的差别在于内存使用上安全机制的差异 . kernel 执行时会占据一段系统的内存空间 , 这 ...

  9. css3动画导航实现

    代码 <!DOCTYPE html> <!-- saved from url=(0223)file:///C:/Users/user/AppData/Local/Temp/HZ$D. ...

  10. poj2780Linearity(多点共线）

    链接 判断最多多少点在一条直线上, 可以枚举每一个点为坐标系的原点,其它点变成相应的位置,然后求得过原点及其点的斜率,排序找一下最多相同的. #include <iostream> #in ...