DOM基础

-DOM基础

       -什么是DOM 文档对象模型

       -浏览器支持情况

-DOM节点

       -childNodes  nodeType

              -文本节点(空)nodeType=3/元素节点nodeType=1

              -获取子节点

              -children只包括元素不包括文本

       -parentNode父节点

              -例子：点击链接，隐藏整个li

       -offsetParent获取定位的父节点

              -例子：获取元素在页面上的实际位置

-DOM节点2

       -首尾子节点

              -有兼容性问题

              -firstChild、firstElementChild

              -lastChild、lastElementChild

       -兄弟节点

              -有兼容性问题

              -nextSibling、nextElementSibling

              -previousSibling、previousElementSibling

 

操纵元素属性

-元素属性操作

       -oDiv.style.display=”block”;

       -oDiv.style[“display”]=”block”;

       -Dom方式

-DOM方式操作元素属性

       -获取：getAttribute(名称)

       -设置：setAttribute(名称，值)

       -删除：removeAttribute(名称)

 

DOM元素灵活查找

-用className选择元素

       -如何用className选择元素

              -选出所有元素

              -通过className条件筛选

       -封装成函数

 

DOM操作应用

-创建DOM元素

       -createElement(标签名)      创建一个节点

       -appendChild(节点)     追加一个节点 父级.appendChild(子节点)

       -例子：为ul插入li

-插入元素

       -insertBefore(节点，原有节点)  在原有节点前插入 父级.insertBefore(a,b)

       -例子：倒序插入li

-删除DOM元素

       -removeChild(节点)     删除一个节点 父级.removeChild(子节点)

       -例子：删除li

 

文档碎片

-文档碎片可以提高DOM操作性能(理论上)

-文档碎片原理 装袋一起写入页面，基本淘汰

-document.creatDocumentFragment()

 

DOM应用高级

表格应用

-获取

       -tBodies、tHead、tFoot、rows、cells

-隔行变色

       -鼠标移入高亮

-添加、删除一行

       -DOM方法的使用

-搜索

       -基本版本：字符串比较

       -忽略大小写：大小写转换

       -模糊搜索：search的使用

       -多关键字：split

       -高亮显示、筛选

-排序

       -移动Li

       -元素排序：转换、排序、插入

       -appendChild先把元素从原有父级删掉，再添加到新的父级上

 

表单应用

-表单基础知识

       -什么是表单

              -向服务器提交数据，如用户注册

       -action   提交到哪里

-表单事件

       -onsubmit     提交时发生

       -onreset        重置时发生

-表单内容验证

       -阻止用户输入非法字符     阻止事件

       -输入时、失去焦点时验证 onkeyup、onblur

       -提交时检查 onsubmit

       -后台数据检查