JavaScript DOM应用

DOM节点
childNodes 子节点(文本节点、元素节点) nodeType 节点类型
nodeType == 3 文本节点
nodeType == 1 元素节点
children 类似于childNodes 子节点仅元素节点 省去nodeType判断
 

See the Pen childNdoes by Adele (@qianduank) on CodePen.


注:子节点只到第一层

parentNode 父节点
栗子:点击链接,隐藏整个li

See the Pen parentNode by Adele (@qianduank) on CodePen.


offsetParent 获取元素用来定位的夫级

首尾子节点
有兼容性问题
firstChild(兼容ie6~8)、firstElementChild(兼容ie6~8之外的) 用if判断做兼容
lastChild 、lastElementChild
兄弟节点
有兼容性问题
nextSibling、nextElementSibling
previousSibling、previousElementSibling

元素属性操作
第一种:oDiv.style.display=“block”;
第二种:oDiv.style[“display”]=“block”;
第三种:DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)

用className选择元素

See the Pen className by Adele (@qianduank) on CodePen.


通过className条件筛选
封装成函数

创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
insertBefore(节点, 原有节点) 在已有元素前插入

See the Pen createElement by Adele (@qianduank) on CodePen.


删除DOM元素
removeChild(节点) 删除一个节点

文档碎片
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()

See the Pen Fragment by Adele (@qianduank) on CodePen.

表格应用
表格获取
tBodies(选取tbody)、tHead(选取thead)、tFoot、rows(选取行tr)、cells(选取单元格td)
隔行变色栗子

See the Pen table-js by Adele (@qianduank) on CodePen.


表格添加、删除一行
DOM方法的使用

See the Pen table-add by Adele (@qianduank) on CodePen.


表格搜索
忽略大小写搜索——大小写转换 toLowerCase() 字符串转全小写
模糊搜索——search的使用 找到并且返回字符串出现的位置,如果没找到返回-1
多关键词——split

See the Pen table-sosuo by Adele (@qianduank) on CodePen.


高亮显示、筛选

排序
移动Li
元素排序:转换——排序——插入

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注