JavaScript之DOM

DOM：document object model ==>文档操作模型

节点类型：note.noteType

a) 元素节点 ：数字1

b) Document ： 数字9

c) 文本节点：数字3（文字，空格，换行....）

d) 注释节点：数字8

e) 属性节点：数字2

f) ChildNodes：类数字

i. 获取摸个节点下的所有子节点

ii. nodeValue：查看节点属性值

iii. nodeName：查看节点属性名

 

父节点和兄弟节点

g) children：查找某个元素的子节点

h) lastElementChild：查找某个元素的最后一个子节点

i) firstElementChild：查找某个元素的第一个子节点

j) parentNode：查找某个元素的父节点

k) nextElementSibling：查找某个元素的下个兄弟节点

l) prveElementSibling：查找某个元素的上个兄弟节点

offsetLeft、offsetTop、offsetParent

m) offsetParent：某个元素相对于第一个带有定位属性的祖先节点

n) offsetLeft、offsetTop：外边框到有定位属性的的父级的内边框的距离

计算绝对位置相对于页面：getBoundingClientRect()

o) 语法：
元素.getBoundingClientRect().left

p) 返回值为一个对象

q) 获取某个元素的信息（高版本：left，top，bottom，right，width，height）

属性操作

a) 获取元素行间的属性：getAttribute(‘key’)；

b) 设置元素行间的属性：setAttribute(‘key’ , ’value’)；

c) 删除元素行间的属性：removeAttribue(‘key’)；

d) 特点：

i. 可以操作行间自定义属性

ii. 可以获取src，href等相对地址（可以作为判断条件）

 

 

元素的宽高：

e) 计算边框：  el.offsetWidth    el.offsetHeight

f) 不计算边框：el.clientWidth    el.clientHeight

可视区域的宽高（document的宽高）

g) document.documentElement.clientWidth : 可视区域的宽

h) document.documentElement.clientHeight : 可视区域的高

创建元素

i) 通过标签名的形式创建一个元素document.createElement( tagName )

j) 往一个节点里添加一个子节点（末尾添加）：appendChild( childNode )

k) 在指定的节点前插入一个节点：insertBefore( child1 , child2 )：child2前面插入child1

l) 从一个节点中删除一个子节点：removeChild( childNode )

m) 替换子节点：replaceChild( el , child )：child被el替换，两个参数必填

n) 克隆节点：cloneNode( boolean )

i. 语法：元素.cloneNode()

ii. true：克隆元素及其子节点

iii. false：克隆元素但不包含子节点，默认值

table

a) table.tHead：获取表头部

b) table.tFoot：获取表格底部

c) table.tBodies：获取表格主体，这是一个集合

d) tBodies[n].rows , tHead.rows , tFoot.rows：获取表格的行tr

e) rows[n].cells：获取单元格td