JavaScript--DOM

最新推荐文章于 2022-09-30 20:04:44 发布

Aurora·

最新推荐文章于 2022-09-30 20:04:44 发布

阅读量99

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/weixin_44040583/article/details/103254688

版权

什么是DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM的分类

核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。特点：万能但复杂且繁琐 HTMLDOM：针对HTML文档，提供的专有的属性和方法。特点：简单但不是万能的

DOM树

在这里插入图片描述
网页中一切在内存中都是以树形结构存储的
树形结构是存储上下级包含关系最直观的结构
HTML中的每一个元素（元素(Element)、属性(Attribute)、文本(Text)）都是一个节点对象（Node），其中document对象是整棵树的根节点

节点对象的三个属性

nodeType(节点类型)

// document文档节点 ==> 9
//     代表整个网页 document文档节点不对应标记 是访问文档中各元素的起点
// element元素节点 ==> 1
//     元素节点对应于网页中的各标记
// attribute属性节点 ==> 2
//     每个元素都有若干个属性
// text文本节点 ==> 3
//     文本节点是最底层节点

nodeName(元素名称)

// document ==> #document
// element ==> 全大写的标签名
// attribute ==> 属性名
// text ==> #text

nodeValue(节点值)

// document ==> null
// element ==> null
// attribute ==> 属性值
// text ==> 文本的内容

DOM操作：增删查改

可以直接获取的三个元素

document.documentElement  ==> <html>
document.head  ==> <head>
document.body   ==> <body>

遍历节点树
即查看整个document文档

// parentNode		 元素父节点
// childNode 		 元素子节点
// firstNode 		 第一个子节点
// lastNode 		 最后一个子节点
// nextSibling	     下一个兄弟节点
// previousSibling   上一个兄弟节点

遍历元素节点
即查看HTML文档

// parentElement           元素父节点
// children                元素子节点(IE9以下支持)
// firstElementChild       第一个元素子节点(IE9以下不兼容)
// lastElementChild        最后一个元素子节点(IE9以下不兼容)
// nextElementSibling      下一个元素兄弟节点
// previousElementSibling  上一个元素兄弟节点

// childElementCount  元素子节点个数

注意：网页中的一切都是节点，包括换行和空字符

HTML查找

在整个页面或者父元素下，查找属性或标签符合条件的元素对象

id按id查找

// 只能用document调用 仅返回一个元素
   var div = document.getElementById("box");

tagName按标签名查找

// 查找指定父元素下的指定标签元素，任何父元素都可以调用
// 返回值放在集合中，没有找到符合要求的子节点，返回一个空数组
// 查找不仅只查直接子节点，而且查找所有子代节点
// 如果想取出唯一的一个元素，必须加[0]
   var elems=parent.getElementsByTagName("标签名");
   var divs = document.getElementsByTagName("div");
   var spans = div.getElementsByTagName("aspan");

name按name属性查找

// 查找表单，只能用document调用
// 返回一个动态数组
   var form1 = document.getElementById("form1");
   var chks = document.getElementsByName("sex");

class按class属性查找

// 查找的子代只要标签中class属性值符合要求的就被选中
   var lis = nav.getElementsByClassName("active");

Aurora·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--DOM

什么是DOM文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。DOM的分类核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。特点：万能但复杂且繁琐HTMLDOM：针对HTML文档，提...
复制链接

扫一扫