JavaScript 基础学习

节点属性

每一个节点都有自己的特点

这个节点属性就记录着属于自己节点的特点

1. nodeType(以一个数字来表示这个节点类型)

语法：节点.nodeType

得到： 一个数字，代表着这个节点的类型

元素节点：1

属性节点：2

文本节点：3

注释节点：8

例如：判定节点是不是元素节点，只要判断他的 nodeType === 1就可以了

2.nodeName(节点名称)

语法： 节点.nodeName

得到： 一个名称，属于这个节点的名称

元素节点：大写标签名(全是大写)

属性节点：属性名

文本节点：#text (所有文本节点的名字都叫做 #text )

注释节点：#comment (所有的注释节点名字都叫做 #comment)

例如： 将来我获取到某一个节点，确定了他是原元素节点，但是不确定是按一个元素

我只有判读他的 nodeName === 'DIV' , 就能确定他是一个 div 标签

3.nodeValue(节点的值)

语法： 节点.nodeValue

得到： 一个值，这个节点存储的值

元素节点：null ，元素节点没有值

属性节点：属性的值

文本节点：这个节点所代表的文本内容(包括换行和空格)

注释节点：这个注释里面所写的文本内容(包括换行和空格)

节点操作 - 创建节点

创建节点 - 通过 JS 代码创建一个标签

1.document.createElement() - 在文档流里面创建一个节点

语法： document.createElement ('你要创建的元素节点名称小写就行')

返回值： 就是一个创建好的元素节点

和你在页面上获取的元素节点没有任何区别

只不过创建出来的节点没有在页面上

2.document.createTextNode() - 文档流里面创建一个文本节点

语法： document.createTextNode ('你要创建的文本内容')

返回值： 就是一个文本节点

和你在页面上获取来的文本节点一样，没有区别

只不过一个在页面上，一个是我凭空捏造

节点操作 - 插入节点

就是把一个节点添加到另一个节点里面作为子节点使用

注意：一般都是把节点添加到某一个元素节点里面

1.appendChild()

作用： 向某一个父节点内追加一个子节点

语法： 父节点.appendChild (要追加的子节点)

结果： 子节点被添加到父节点里面了，排在所有节点的最后一个位置

2.insertBefore()

作用： 向某一个父节点内插入一个子节点，插入到本身的某一个子节点的前面

语法： 父节点.insertBefore (你要插入的节点，哪一个已经存在的子节点前面）

结果： 就是把该节点插入到父节点的指定节点前面

节点操作 - 删除节点

就是把一个已经存在的节点移出

1.removeChild()

作用： 从父节点里面移除某一个子节点

语法： 父节点.removeChild (你要移出的子节点）

结果： 该节点里面不再有这个子节点了

2.remove()

作用： 把自己移出

语法： 要移除的节点.remove ()

结果： 自己直接被移除掉

节点操作 - 替换节点

就是用某一个节点，去替换一个已经存在的节点

1.replaceChild()

作用： 就是把父节点下的某一个子节点替换成新节点

语法： 父节点.replaceChild (新节点，旧节点）

结果： 使用新节点，把旧几替换掉

节点操作 - 克隆节点

把一个已经存在的节点(可以是页面里面获取了，也可以是自己创建的)

1.cloneNode()

作用： 把节点复制一模一样的

语法： 要克隆的节点.cloneNode (参数选填)

默认值是 false ，表示不克隆后代节点

可以选填 true ，表示克隆所有后代节点

返回值： 就是一个已经被克隆好的节点

克隆出来的标签不在页面上，是在 JS 代码里面(在内存里面)

获取元素的非行内样式

1.getComputedStyle() 方法

标准浏览器使用（高版本浏览器）

作用： 获取元素的样式（包含行内样式和非行内样式）

语法： window.getComputedStyle （你要获取样式的元素）

返回值： 是一个对象，里面包含所有元素目前的样式

只读的对象，只能获取元素的样式

你需要哪一个样式的时候，直接在对象里面获取某一个样式的值

2.currentStyle 属性

IE 低版本使用（IE 6 7 8 )

语法： 要获取样式的元素.currentStyle （包含行内样式和非行内样式）

得到： 就是一个对象，里面包含元素多有的目前的样式

兼容： 不能用 || 来兼容

需要用 if else 来判断

获取元素偏移量 - 参考系

一个元素的偏移量参考元素就是这个元素的定位父级

1.offsetParent 属性

作用： 获取元素的偏移量参考父元素

语法： 元素.offsetParent

得到： 就是你这个元素获取偏移量的时候是根据谁来的

获取元素的偏移量 - 元素偏移量

1.offsetLeft

语法： 元素.offsetLeft

得到： 元素相对于参考元素左侧的距离

2.offsetTop

语法： 元素.offsetTop

得到： 元素相对于参考元素上边的距离

获取元素尺寸

获取元素在页面上的 占地面积

display：none; 那么获取不到（消失不占位）

visibility：hidden;那么可以获取到（消失占位）

opacity：0； 那么乐意获取到（不显示，但是占位）

注意： 获取到的是没有单位的数字，可以直接参与运算

1.offsetWidth 和 offsetHeight

获取到的是元素的边框 + 内边距 + 内容区域的尺寸

offsetWidth 是宽度

offsetHeight 是高度

2.clienWidth 和 clienHeight

获取到的是元素的 内边距 + 内容区域的尺寸

clienWidth 是宽度

offsetHeight 是高度

获取浏览器窗口大小

获取浏览器可视窗口大小

之前我们学过一组属性, innerWidth 和 innerHeight

它们获取到的是包含滚动条的尺寸

今天我们再学习一下获取窗口尺寸的另外的办法

获取到的是不包含滚动条的尺寸

其实你要是获取不包含滚动条的尺寸

就是在获取页面的占地面积

1. document.documentElement.clientWidth

=> 页面的宽度(不包含滚动条)

2. document.documentElement.clientHeight

=> 页面的高度(不包含滚动条)