JavaScript系统学习---07---DOM-节点 *** 作

一、DOM节点 1.1 DOM节点

        DOM树里每一个内容都称之为节点；

1.节点类型

       （1） 元素节点

                所有的标签 比如 body、 div                 html 是根节点

        （2）属性节点

                所有的属性 比如 href

       （3） 文本节点

                所有的文本

2.小结

（1）什么是DOM 节点？

         DOM树里每一个内容都称之为节点

（2） DOM节点的分类？

        元素节点 比如 div标签         属性节点 比如 class属性         文本节点 比如标签里面的文字

（3） 我们重点记住那个节点？

         元素节点          可以更好的让我们理清标签元素之间的关系 1.2 查找节点

1.节点关系：

        父节点         子节点         兄弟节点

2.父节点查找：

        parentNode 属性         返回最近一级的父节点 找不到返回为null

3.子节点查找

         childNodes （尽量不用，会取到换行符）

        获得所有子节点、包括文本节点（空格、换行）、注释节点等

         children （重点）

        仅获得所有元素节点         返回的还是一个伪数组

4.兄弟关系查找：

（1） 下一个兄弟节点

         nextElementSibling 属性

（2）上一个兄弟节点

         previousElementSibling 属性

5.小结

        （1）查找父节点用那个属性？

          parentNode

        （2） 查找所有子节点用那个属性？

         children

        （3） 查找兄弟节点用那个属性？

         nextElementSibling

         previousElementSibling

1.3 增加节点

1.创建节点

         即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点          创建元素节点方法：

 2.追加节点

        要想在界面看到，还得插入到某个父元素中         插入到父元素的最后一个子元素:

 插入到父元素中某个子元素的前面

 3.克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆 若为false，则代表克隆时不包含后代节点 默认为false

1.4 删除节点

        若一个节点在页面中已不需要时，可以删除它 ；

        在 JavaScript 原生DOM *** 作中，要删除元素必须通过父元素删除 ；

语法 ：

注：

         如不存在父子关系则删除不成功 ；         删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点；

二、 时间对象 2.1 实例化

        在代码中发现了 new 关键字时，一般将这个 *** 作称为实例化 ；        创建一个时间对象并获取时间；

获得当前时间

 获得指定时间

2.2 时间对象方法

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

案例：页面显示时间

        需求： 将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面

2.3 时间戳

1. 什么是时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

2. 三种方式获取时间戳

        （1）使用getTime()方法

        （2）简写 + newDate()（重点应用）

        （3）使用Date().now()

         无需实例化，但是只能得到当前的时间戳，而前面两种可以返回指定时间的的时间戳。

  四、重绘和回流

1. 浏览器是如何进行界面渲染的

解析（Parser）HTML，生成DOM树(DOM Tree) 同时解析（Parser） CSS，生成样式规则 (Style Rules) 根据DOM树和样式规则，生成渲染树(Render Tree) 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小） 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制 Display: 展示在页面上

 2. 重绘和回流（重排）

（1） 回流(重排)

        当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为 回流。

（2）重绘

        由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、 outline等), 称为重绘。

（3）重绘不一定引起回流，而回流一定会引起重绘。