学习目标:
节数 | 知识点 | 要求 |
---|---|---|
第一节 什么是DOM? | DOM的介绍 | 了解 |
第二节 Document对象 | Document对象介绍 | 了解 |
第三节 Dom节点分类 | Dom节点分类 | 掌握 |
第四节 Document节点属性 | Document节点属性 | 掌握 |
第五节 获取页面元素节点 | 获取页面元素节点 | 掌握 |
第六节 创建页面元素 | 创建页面元素 | 掌握 |
第七节 操作页面元素属性 | 操作页面元素属性 | 掌握 |
一、什么是DOM?
DOM Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改html文档的内容和结构。
二、Document对象
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
三、DOM节点分类
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。
四、Document节点属性
4.1返回文档内部的某个节点doctype,documentElement,body,head
-
doctype
-
documentElement
-
Body
-
Head
4.2返回文档指定信息
documentURI,URL,domain,lastModified,location,title,readyState属性
-
documentURI:返回当前的网址(url)
-
URL
-
domain:返回当前的域名
lastModified
Location:
location.assign(‘传递一个url’);
window.location = ‘传递一个url’;
location.href = ‘传递一个url’;
Title:
readyState
readyState属性返回当前文档的状态。
共有三种可能值:
加载HTML代码阶段(尚未完成解析)是“loading”,
加载外部资源阶段是“interactive”,
全部加载完成是“complete”。
4.3返回文档内部特定节点的集合
anchors,forms,images,links,scripts
五、获取元素节点(重点)
5.1 getElementById()
getElementById():通过标签的id属性获取元素
5.2 getElementsByTagName()
getElementsByTagName():通过标签名来获取元素。(数组)
5.3 getElementsByName()
getElementsByName():通过标签的name属性获取元素。(数组),
5.4 getElementsByClassName()
getElementsByClassName():通过标签的class属性来获取元素。(数组),有浏览器兼容性,主要是ie8以下。
5.5 querySelector()
querySelector():通过css选择器来获取元素
5.6 querySelectorAll()
querySelectorAll():通过css选择器来获取元素(数组)
5.7 getElement和querySelector的区别
query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组,不会随着文档操作而改变. 在使用的时候getElement这种方法性能比较好,query选择符则比较方便.
1.得到的元素不是需要很麻烦的多次getElementBy…的话,尽量使用getElementBy…,因为他快些。
2.得到的元素需要很麻烦的多次getElementBy…组合才能得到的话使用querySelector,方便。
3.看实际情况,你决定方便优先还是性能优先。