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中文网其它相关文章!

推荐阅读:

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

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

下载

JavaScript之优化DOM

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

46

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

41

2026.02.28

Golang 性能分析与运行时机制:构建高性能程序
Golang 性能分析与运行时机制:构建高性能程序

Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面,深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略,并结合实际案例剖析 Go 程序的运行时行为,帮助开发者掌握构建高性能应用的关键技能。

37

2026.02.28

Golang 并发编程模型与工程实践:从语言特性到系统性能
Golang 并发编程模型与工程实践:从语言特性到系统性能

本专题系统讲解 Golang 并发编程模型,从语言级特性出发,深入理解 goroutine、channel 与调度机制。结合工程实践,分析并发设计模式、性能瓶颈与资源控制策略,帮助将并发能力有效转化为稳定、可扩展的系统性能优势。

21

2026.02.27

Golang 高级特性与最佳实践:提升代码艺术
Golang 高级特性与最佳实践:提升代码艺术

本专题深入剖析 Golang 的高级特性与工程级最佳实践,涵盖并发模型、内存管理、接口设计与错误处理策略。通过真实场景与代码对比,引导从“可运行”走向“高质量”,帮助构建高性能、可扩展、易维护的优雅 Go 代码体系。

18

2026.02.27

Golang 测试与调试专题:确保代码可靠性
Golang 测试与调试专题:确保代码可靠性

本专题聚焦 Golang 的测试与调试体系,系统讲解单元测试、表驱动测试、基准测试与覆盖率分析方法,并深入剖析调试工具与常见问题定位思路。通过实践示例,引导建立可验证、可回归的工程习惯,从而持续提升代码可靠性与可维护性。

3

2026.02.27

漫蛙app官网链接入口
漫蛙app官网链接入口

漫蛙App官网提供多条稳定入口,包括 https://manwa.me、https

245

2026.02.27

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

21

2026.02.27

AO3官网直接进入
AO3官网直接进入

AO3官网最新入口合集,汇总2026年可用官方及镜像链接,助你快速稳定访问Archive of Our Own平台。阅读专题下面的文章了解更多详细内容。

403

2026.02.27

热门下载

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

精品课程

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

共18课时 | 6.4万人学习

Django 教程
Django 教程

共28课时 | 4.7万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.8万人学习

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

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