0

0

Dom属性的使用方法

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-19 16:26:14

|

3276人浏览过

|

来源于php中文网

原创

这次给大家带来Dom属性的使用方法,Dom属性使用的注意事项有哪些,下面就是实战案例,一起来看一下。

一、javascript的三大核心

  1.ECMAScript js的语法标准

  2.DOM Document object Model 文档对象模型,提供的方法可以让js操作html标签

  3.BOM Browser Object Model 浏览器对象模型,提供的方法让js可以操作浏览器

注意:1. js里最大的boss是window,document只是window下的一个对象

  1. document.documentElement 这个东西可以拿到html

                document(在文档里,document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

二、DOM的属性

js ---> DOM --> html

  js通过DOM去操作html标签

  1. childNodes 返回当前对象下的所有节点对象,会返回文本节点

注意: 在ie8下只会返回元素节点

  1. nodeType 返回节点类型,元素节点返回1 文本节点返回3 注释节点返回8

  2. children 返回对象下所有子元素节点,并且没有兼容问题

  3. firstChild 返回第一个子节点,在IE8跟childNodes一样的表现

  1. lastChild 返回最后一个子节点 同上

  1. firstElementChild 返回最后一个元素节点,不兼容IE8

  1. nextSibling 下一个兄弟节点 在主流的浏览器,可能会拿到除了元素节点以外的节点,在IE8里,只会返回元素节点,如果没有就返回null

  2. previousSibling 上一个兄弟节点 同上

  3. nextElementSibling 下一个兄弟元素节点 如果没有返回null 不兼容IE678

  1. previousElementSibling 上一个 同上

  2. parentNode * 返回父节点 没有兼容性

  3. offsetParent 返回定位父级,如果都没有找到,最后返回body上,没有兼容问题

  13.nodeName 返回标签的构造器 标签名大写字母

三、DOM的一些方法

  createElement(‘p’)

    这个里面是标签

    新建元素节点,需要接受一个参数,参数就是需要新建的标签。

  createTextNode()

    新建文本节点

  createComment()

    新建注释节点

节点操作

  添加元素节点

    1. 父级.appendChild(子节点)

    把子节点添加到父节点里去 往父级的所有子元素节点后 追加一个节点

  2. 父级.insertBefore(子节点, 指定的子节点)

    添加到指定的节点前面

  1. 父级.removeChild(需要删除的节点)

  1.克隆节点 cloneNode

    克隆节点, 克隆母体.cloneNode()

    函数接收一个参数,这个参数是一个布尔值,默认false,浅复制, true深度复制

    浅复制:只复制标签

    深度复制:把跟这个标签对象相关的一些标签的行内的信息一起复制,不会复制js里的自定义属性。

  这是我对dom学习的笔记,如果能够帮助到你,我会非常高兴。


相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JavaScript之优化DOM

网赢VMALL多商户商城系统
网赢VMALL多商户商城系统

Vmall及配套产品是一套多商户协作型商城系统。新一代的电子商务解决方案,商城以社区专业属性为主题,通过网赢平台共享商家资源,对各个商城的商家资源提供了保障,Vmall采用赢联保(赢联保是网赢携手“支付宝”、“财付通”和“快钱”等行业领先的支付平台,联合打造的交易担保平台,应用于

下载

微信小程序怎么实现数据双向绑定
JavaScript的字符串怎样使用

相关专题

更多
Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

9

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

3

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

13

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

2

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm
毒蘑菇显卡测试网站入口 毒蘑菇测试官网volumeshader_bm

毒蘑菇VOLUMESHADER_BM测试网站网址为https://toolwa.com/vsbm/,该平台基于WebGL技术通过渲染高复杂度三维分形图形评估设备图形处理能力,用户可通过拖动彩色物体观察画面流畅度判断GPU与CPU协同性能;测试兼容多种设备,但中低端手机易卡顿或崩溃,高端机型可能因发热降频影响表现,桌面端需启用独立显卡并使用支持WebGL的主流浏览器以确保准确结果

12

2026.01.21

github中文官网入口 github中文版官网网页进入
github中文官网入口 github中文版官网网页进入

github中文官网入口https://docs.github.com/zh/get-started,GitHub 是一种基于云的平台,可在其中存储、共享并与他人一起编写代码。 通过将代码存储在GitHub 上的“存储库”中,你可以: “展示或共享”你的工作。 持续“跟踪和管理”对代码的更改。

7

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
CSS3 教程
CSS3 教程

共18课时 | 4.7万人学习

Django 教程
Django 教程

共28课时 | 3.3万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号