博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM基础
阅读量:4315 次
发布时间:2019-06-06

本文共 1287 字,大约阅读时间需要 4 分钟。

1. DOM获取节点

  1)通过childNodes获取子节点

    属性:childNodes nodeType
    如果子节点中有文本节点,会同时返回文本节点。这时需要搭配nodeType,才能滤掉文本节点,只返回元素节点。

  2)通过children获取子节点

    属性:children
    只会返回所有的元素节点,不会返回文本节点。
    何谓文本节点?
    文本节点: 没有任何标签包含的字符串或空串。

  3)获取父节点

    属性:parentNode
  4)获取相对定位的父节点
    属性:offsetParent

  5)获取首尾子节点

    获取首个子节点:firstChild、firstElementChild
    获取末尾子节点:lastChild 、lastElementChild
    注:firstChild和lastChild有兼容性问题,建议使用firstElementChild 和 lastElementChild。

  6)获取兄弟节点

    获取后一个兄弟节点:nextSibling、nextElementSibling
    获取前一个兄弟节点:previousSibling、previousElementSibling
    注:nextSibling和previousSibling有兼容性问题,建议使用nextElementSibling 和 previousElementSibling。

2. 操纵DOM元素属性

  第一种:oDiv.style.display="block";

  第二种:oDiv.style["display"]="block";
  第三种:Dom方式
    获取:getAttribute(名称)
    设置:setAttribute(名称, 值)
    删除:removeAttribute(名称)

3. DOM元素的创建、插入、删除

  1)创建DOM元素
    createElement(标签名)              创建一个节点

  2)插入DOM元素

    appendChild(节点) 追加一个节点
    insertBefore(节点, 原有节点)            在已有元素前插入
  3)删除DOM元素
    removeChild(节点) 删除一个节点

4. 文档碎片(很少使用)

  1)创建文档碎片

    document.createDocumentFragment()
  2)说明
    如果需要添加多个节点,可以先创建一个文档碎片,先将要添加的节点保存到文档碎片中,
    再将文档碎片添加到指定位置。
    智能社老师的比喻:文档碎片好比是胶囊的外壳,吃到肚子里这层外壳会自动融化。
    文档碎片被添加到父元素下之后,也会自动消失,只留下那些本来就要添加的节点。

转载于:https://www.cnblogs.com/zj0208/p/8340250.html

你可能感兴趣的文章
VNPY - 事件引擎
查看>>
MongoDB基本语法和操作入门
查看>>
学习笔记_vnpy实战培训day04_作业
查看>>
OCO订单(委托)
查看>>
学习笔记_vnpy实战培训day06
查看>>
回测引擎代码分析流程图
查看>>
Excel 如何制作时间轴
查看>>
matplotlib绘图跳过时间段的处理方案
查看>>
vnpy学习_04回测评价指标的缺陷
查看>>
iOS开发中遇到的问题整理 (一)
查看>>
Linux(SUSE 12)安装jboss4并实现远程访问
查看>>
Neutron在给虚拟机分配网络时,底层是如何实现的?
查看>>
netfilter/iptables全攻略
查看>>
Overlay之VXLAN架构
查看>>
Eclipse : An error occurred while filtering resources(Maven错误提示)
查看>>
在eclipse上用tomcat部署项目404解决方案
查看>>
web.xml 配置中classpath: 与classpath*:的区别
查看>>
suse如何修改ssh端口为2222?
查看>>
详细理解“>/dev/null 2>&1”
查看>>
suse如何创建定时任务?
查看>>