js篇【DOM探索基础】

原创 qq873241789 随笔 js 283阅读 2017-03-03 15:36:04 举报

js篇【DOM探索基础】

每天做一篇笔记就是嗨呀,这个笔记能让你了解到DOM生成的一系列流程。

1.DOM --文档对象模型

(1)dom是由 document、object、 model组成。
(2)html的生成:css定义样式,javascript赋予行为。
ECMAScript:来定义行为,现在是es6的版本。
BOM:浏览器对象模型。提供独立于内容,与浏览器窗口进行交互的对象(核心对象是window)。这里是一篇不错的bom知识总结
原来像本地存储、cookie关于window都来自bom,像window打开关闭窗口、定时器、offset系类、scroll系列、client系列、事件参数e、鼠标键盘事件、正则
DOM 文档对象模型:给js提供了接口来操作html。
在dom这边,主要是改变页面HTML的元素或者属性、css、页面所有事件的反应。
读取head标签认识dom,读取body开启文档对象模型。
(3)DOM级别
dom1级 --- DOM Core(规定基于xhtml的文档结构) DOM THML(在前面的基础上加以扩展,添加HTML对象)
dom2级 --- DOM Views(DOM视图,css引用前后的视图) DOM Events(事件与事件之间的接口)
DOM Style(基于css为样式的接口) DOM Traversal and Range(遍历dom,操作文档树的接口 )
dom3级 --- DOM Load And Save (以同样方式加载,保存文档) DOM Validation(验证文档)

(4)文档的类型
html -- 超文本标记语言,展示页面的风格。
xhtml -- 可扩展标记语言,存放数据。

(5)节点的类型
把一个文档分成多个节点。节点用不同的类型表示,表达不同的含义。

节点类型

为了兼容所以的浏览器,尽量使用数字常量来判断。
元素节点,接着获取元素,输出nodeName,返回元素名字, 输出nodeValue,返回元素内容。
属性节点,在获取元素的基础上,添加attributes【0】方法,剩下的同理。
文本节点,在获取元素的基础上,添加childNodes【0】方法,剩下的同理。
注释节点,document。body。childNodes【找到注释下标】,剩下的同理。
获得doctype,document。doctype。nodeName / nodeValue,剩下的同理。
节点片段,先document。createDocumentFragment创建片段,剩下的同理。

节点nodeNamenodeValue

2.DOMReady --文档渲染

浏览器把请求到的html内容显示出来的过程,先通过网络获取请求的内容。
1.解析HTML 构建DOM树(构建DOM节点)开始解析HTML,讲标签转化成dom树节点。
2.构建渲染树(解析样式信息) 开始解析样式信息,解析外部的css文件、style中的样式。按照正确的顺序显示到屏幕上。
3.布局渲染树(布局dom节点) 确定每个节点在屏幕上的坐标。
4.绘制渲染树(绘制dom节点) 遍历dom,绘制每个节点。
这只是html的渲染,当html渲染完毕了,外部资源可能加载完毕,可能尚未加载,不影响。
window。onload 是html渲染树渲染完毕之后在运行。
在页面dom树创建(HTML解析第一步完成)就触发DOMContentLoaded事件。不支持的,通过IE中document,documentElement。doScroll(‘left’)判断是否创建完毕。
javascript 代码

readyState 这个属性返回当前文档的状态。
uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载,文档与用户可以开始交互
complete - 载入完成
argments --- arguments 对象不能显示创建,在函数开始时才可以用,它不是数组,但是访问单个参数跟数组方式相同。
arguments.length 返回传递参数的数值,arguments.callee 初始值就是被执行的Function对象,允许匿名的递归调用。

3.判断节点

判断元素节点的四种方法。
1.isElement 判断某个节点是否是元素节点。
2.isHTML 判断是否是html文档的元素节点。
3.isXML 判断是否是xhtml文档的元素节点。
4.contains 判断两个节点的包含关系。
判断是否是元素节点的封装

(2)判断html 、 xhtml元素节点。
html可以说是xhtml的一个子集,html 的NodeName是大写。
判断html、xhtml元素节点

(3)两个节点的关系.
contains 用来判断两个元素是否是包含关系。(返回true false)但是为了浏览器兼容,需要另外封装方法。
判断两个元素是否是包含关系。

4.dom节点继承层次

一个属性有很多很多的原型链。尽量使用MVVM框架来渲染dom。

4.HTML嵌套规则

1.块元素可以包含内联元素或某些快元素,但内联元素不能包含快元素,只能包含其他内联元素。
2.快元素不能发在p 标签里面。

  1. h标签、p、dt 只能包含内联元素,不能包含块级元素。
    4.li内可以包含div标签。
    5.块级元素与块级元素并列,内联元素与内联元素并列。
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复