Dom属性

获取元素的尺寸

=> client

->获取宽度: 元素.clientWidth 获取高度: 元素.clientHeight

获取到的尺寸包含:内容 + 内边距

=> offset

-> 获取宽度 : 元素.offsetWidth 获取高度: 元素,offsetHeight

-> 获取到的尺寸包含: 内容 + 内边距 + 边框

获取元素的偏移量

=> client

-> 获取距离上边的距离: 元素.clientTop

-> 获取的尺寸是(内容区域 + 内边距) 距离边框左上角的距离 也就是上边框和左边框的宽度

=> offset

-> 获取距离上边的距离: 元素.offsetTop

-> 获取距离左边的距离 : 元素.clientLeft

-> 获取的尺寸是相对于定位父系的尺寸

获取窗口的尺寸

=> 获取宽度 document.documentElement.clientWidth

=> 获取高度 document.documentElement.clicentHeight

=> 不包含滚动条的尺寸

DOM节点

=> 页面上的每一个元素(标签 属性 文本 注释)

获取节点

父元素.childNodes 作用: 获取父元素内的所有 节点 是一个伪数组

父元素.children 作用 : 获取父元素内的所有元素节点

父元素.firstChild 作用: 获取父元素中的第一个节点

父元素.firstElementChild 获取父元素中的第一个 元素节点

父元素.lastChild 获取父元素中的最后一个节点

父元素.lastElementChild  获取父元素中的第一个  元素节点

元素.previousSibling   获取元素的上一个兄弟节点

元素.previousElementSibling   获取元素的上一个兄弟元素节点

元素.nextSibling  获取元素的下一个兄弟节点

元素.nextElementSibling   获取元素的下一个兄弟元素节点

元素.parentNode   获取元素的父节点

元素.parentElement  获取元素的父元素节点

元素.attributes    元素身上的属性

操作节点

就是对节点的操作  

具体操作有哪些    创建节点  删除节点  替换节点  插入节点  克隆节点

创建节点

创建标签节点 

  语法:  document.createElement('标签名')      作用: 就是创建一个标签节点

创建一个文本节点

 语法: document.createTextNode('文本内容')   作用: 就是创建一个文本节点

删除节点

父元素.removeChild()    就是删除指定的节点

元素.remove()    

替换节点

用一个节点替换另一个节点

父元素.replaceChild(换上节点, 换上节点)

插入节点

在一个节点内插入另一个节点

父节点.appendChild(你要插入的子节点)

作用: 就是在父节点中插入一个节点  放到父节点位置中的最后面

父节点.insertBefore(要插入的节点,谁的前面)

克隆节点

复制一个节点

cloneNode(参数)

语法: 元素.cloneNode(参数)

参数:是可选的一个参数

      不写就是默认值   是false  值 复制该元素本身不包含后代元素

     选填是true  意思是要复制该元素及其后代的所有元素

作用:  就是复制一份

节点的属性

每一个节点都是不同的  偶尔都有自己的属性

分为三种  nodeType   节点的类型(用数字表示)

nodeName   节点的名称

nodeValue     节点的值