H5-HTML（二）DOM 简述
本系列笔记以《JavaScript Dom 编程艺术 2nd》为基本参考资料
一、浏览器-HTML 的历史
HTML 就是一个标签语言，历史中各个浏览器厂家各自为政，群雄争霸这个块市场。 为什么呢？留给读者思考。
导致的后果：
1、各个浏览器支持的标签规范不统一，甚至一个浏览器的几个版本也存在兼容性问题
1.1编写前端页面的工程师 不专业
1.2 编写前端页面的工程师很苦逼。自己挖坑自己埋，需要根据不同浏览器版本做一些个性化的代码编写工作
2、第三方程序无法解析
非结构化的标签，臭名昭著
二、目前的前端
接受了教训，大家（浏览器厂家）坐在一起梳理了一个眉目。 运用分层思想或者叫面向对象思想。
1、HTML 负责页面的数据结构 便签+内容 。 代表模型：“DOM”
2、CSS 负责 页面布局与美工，表现层的东西，最大限度地与HTML 独立。代表模型： “盒子模型”
3、Javascript 负责前端行为，数据有效性，特效展示等
问题来了：
1、三个东西怎么联系起来呢？ 前提是什么
答：中心点还是围绕 数据结构 - HTML 。 上边已述，HTML 很不规范，不是结构化标记语言，无法定位某个标签。解决方案： H5 新标准， DOM 模型。
2、什么是H5, DOM?
H5 - 第五代HTML 标准。 2008 就发布，可以这么说现在市面上的浏览器都支持了H5 标准。未来趋势，所以编写代码按照 H5标准来，没错
明确规定了有哪些标签，标签属性有哪些，属性值的枚举值有哪些
DOM - Document Oject Model 。其实这个也不是新东西，仿照其他结构化标记语言的，如：XML。主要目的：给H5的所有标签打标记，并且建立父子关系（<HTML>标签就是根）。
提出了三个节点： 元素节点（标签） 、文本节点（标签之间的文本内容）、属性节点（标签中的属性）
解决问题
1、第三方程序（python）：拿到这个文档可以找到任意标签下的任意内容
2、自己内部：CSS,Javascript 都可以快速定位要操作的标签。甚至可以动态的添加 “节点”
三、DOM 的基本用法
1、Dom 树
2、如何获取元素节点？
2.1 通过 id 找到 HTML 元素
var x=document.getElementById("intro");
2.2 通过标签名找到 HTML 元素
var y=x.getElementsByTagName("p"); --返回数组
2.3 通过类名找到 HTML 元素
var y=x.getElementsByClassName("p");
3、如何修改标签中的文本&标签属性？
3.1 标签属性值操作
element.setAttribute("value"，"the new value");
var attr = element.getAttribute("value");
3.2 文本标签
3.2.1 获取文本节点
element.firstChild
3.2.1 操作文本节点值
element.firstChild.nodeValue = text;
--非DOM
文本内容：document.getElementById("p1").innerHTML="New text!";
标签属性：document.getElementById("image").src="landscape.jpg";
可以理解 文本内容这块是标签的特殊属性 innerHTML
4、更加一般化的方法
-- 这里对Dom 不会做深入记录，只是抛砖引玉，后期有专门一系列笔记来说清楚H5-DOM这块内容。
每个节点都是一个对象，对象就有：属性 、方法 。
--常用属性
childNodes：该标签的所有子标签（隔代不算），就是记录父子关系的。
是一个数组。 childNodes[0] - firstChild , childNodes[length-1] - lastChild.
nodeType : 1-元素节点； 2-属性节点； 3-文本节点。
遗留几个问题
1、H5-DOM 模型API 研究
2、解决一个问题有几种方法，那么他们有什么不同？ 如何选择？
浙公网安备 33010602011771号