DOM基础知识

DOM基础知识

1、DOM？页面操作

2、浏览器的兼容性？IE、FF、Chrom

3、DOM节点

1）childNodes（包含文本节点和元素节点）nodeType children（只包含元素节点）

2）parentNode查找父节点

3）offSetparent绝对定位 根据样式插入查找父节点

4）firstChild，firstElementChild，lastChild，lastElementChild，nextSibling，nextElementSibling，priviousSibling，priviousElementSibling

4、操作元素

1）元素属性的操作三种：

第一种：oDiv.style.display=”block”

第二种：oDiv.style[“display”]=”block”

第三种：DOM方式

2）使用DOM方式操作元素属性：

获取：getAttribute(名称)

设置：setAttribute（名称，值）

删除：removeAttribute（名称）

5、DOM元素的灵活查找

1）使用className选择元素

2）封装成函数

6、Dom的创建、插入、删除元素

1）createElement（标签名）创建节点

2）appendChild（节点）追加节点

3）insertBefore（节点，哪个节点之前）

4）removeChild（节点）移除节点

5）文档碎片，目前用的不多

注意：innerHTML添加value值

7、表格的布局及基本元素

1）tBodies[ ].rews[ ].cells[ ]数组

tHead、tFoot元素

2）toLowerCase

3）字符串.search（‘值’）是否匹配，匹配返回位置，不匹配返回-1

4）arr[]=split（“ ”）根据空格切数组并存储在arr[]

作业：

1、利用parentNode删除文本

2、根据样式寻找父节点

3、Li背景色跟换

4、点击按钮传值到li中，利用三种方式实现

5、通过className设置li的背景色，封装函数

6、创建li'，把文本框内的内容添加到li中

7、获取表格中的一个value

8、隔行变色、表格的增删改、搜索结果高亮，搜索忽略大小写，模糊搜索