qtreewidget 获取根节点_javascript：什么是Dom节点？

大家好，我是专注前端开发，Web前端，可爱又迷人的前端小姐姐，本期为大家带来的前端入门新知识是”javascript：什么是Dom节点？“，有兴趣做前端开发的朋友，和我一起来看看吧！

本节主要内容：

1. 什么是DOM?
2. Document对象
3. Dom节点分类
4. Document节点属性
5. 获取页面元素节点
6. 创建页面元素
7. 操作页面元素属性

学习目标：

一、什么是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节点属性

3.1返回文档内部的某个节点doctype,documentElement,body,head

1. doctype

2. documentElement

3. Body

4. Head

3.2返回文档指定信息

documentURI，URL，domain，lastModified，location，title，readyState属性

1、documentURI:返回当前的网址（url）

2、URL

3、domain:返回当前的域名

lastModified

Location:

location.assign('传递一个url');

window.location = '传递一个url';

location.href = '传递一个url';

Title:

readyState

readyState属性返回当前文档的状态。

共有三种可能值：

加载HTML代码阶段（尚未完成解析）是“loading”，

加载外部资源阶段是“interactive”，

全部加载完成是“complete”。

3.3返回文档内部特定节点的集合

anchors,forms,images,links,scripts

五、获取元素节点（重点）

4.1 getElementById()

getElementById():通过标签的id属性获取元素

4.2 getElementsByTagName()

getElementsByTagName():通过标签名来获取元素。（数组）

4.3 getElementsByName()

getElementsByName():通过标签的name属性获取元素。（数组），

4.4 getElementsByClassName()

getElementsByClassName():通过标签的class属性来获取元素。（数组），有浏览器兼容性，主要是ie8以下。

4.5 querySelector()

querySelector():通过css选择器来获取元素

4.6 querySelectorAll()

querySelectorAll():通过css选择器来获取元素(数组)

4.7 getElement和querySelector的区别

query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变． 在使用的时候getElement这种方法性能比较好，query选择符则比较方便．

1.得到的元素不是需要很麻烦的多次getElementBy..的话，尽量使用getElementBy..,因为他快些。

2.得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector，方便。

3.看实际情况，你决定方便优先还是性能优先。

创建li元素，getElement创建元素，会造成死循环，而使用querySelecotor创建的li元素是可以的

4.7.1实例：修改一个通过单击div块的内容

4.8 作业：日历的制作

4.9 实例：选项卡的制作

普通实现：

使用let实现

作业：选项卡闭包的实现

作业：创建一张图片，并添加属性，给图片添加边框样式

六、创建页面元素（重点）

6.1 createElement()：创建元素节点

6.2 createTextNode()：创建文本节点

6.3 createAttribute()：创建属性

6.4 className的使用

6.5 实例：创建一个菜单

创建哪些元素

Ul ,li,

设置属性：样式

七、操作页面元素属性

7.1 元素属性节点的操作

语法：

setAttribute('属性名','属性值')：给节点元素设置属性

getAttribute('属性名')：获取属性的值

removeAttribute('属性名')：删除属性

7.2 style属性的操作

style对象的cssText属性

7.3 style属性其他方法的操作

style对象提供了三个方法来读写行内css规则：

setProperty(propertyName,value)：设置某个CSS属性。

getPropertyValue(propertyName)：读取某个CSS属性的值。

removeProperty(propertyName)：删除某个CSS属性。

7.4 setAttribute和createAttribute的区别

7.5 作业：创建一个宽度500，高度300，背景蓝色的div块元素。

好了，本期的前端开发知识“javascript：什么是Dom节点？”内容到此结束了，喜欢我的文章的话，点个赞呗，我们下期再见！