JavaScript中的两大护法(二)


0.前言

上一篇我们讲了另一个“护法”——BOM,今天来讲一下第二个“护法”——DOM。为什么要把这一个放在这讲,是因为学习window方法后会对这个比较好理解。好了废话不多说了,进入正题。

1.了解DOM

DOM:文档对象模型(Document Object Model),DOM是访问HTML和操作HTML的标准。
Core DOM——核心DOM 针对任何结构化文档的标准模型。
XML DOM ——针对 XML 文档的标准模型。
HTML DOM——针对 HTML 文档的标准模型。

2.DOM节点的分类

1.文档节点
2.标签(元素)节点
3.属性节点
4.文本节点
5.注释节点
如下图:

DOM节点分类.png

3.DOM节点层级关系

1、父节点(parent node):父节点拥有任意数量的子节点
2、子节点(child node):子节点只能拥有一个父节点
3、兄弟节点(sibling node):拥有相同父节点的同级节点
4、根节点(root node):一个HTML文档一般只有一个根节点,根节点没有父亲节点,是最上层的节点。

祖先节点:包含子节点的节点都可以叫做祖先节点,其中包括了父节点。
后代节点:一个节点内包含的所有节点,叫做后代节点,其中包括了子节点。
如下图:

DOM节点关系.png

4.JS跟页面中这些标签进行交互

1、获取标签(元素)节点
   修改标签CSS样式
   修改标签属性
2、创建标签
3、删除标签
4、复制标签

css样式属性和style对象属性在js中的获取方式对比图
css.png

5.总结

用法在下一节再给大家分享,谢谢!!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,800评论 2 61
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,285评论 1 92
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 2,364评论 2 15
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,963评论 0 8
  • 我曾经无比期待在外租房子。应了那句一个人缺什么,它就会无比期待什么。那时候,我缺的是自由。因为寄宿在亲戚家,拘谨约...
    丢了朵朵阅读 654评论 2 8

友情链接更多精彩内容