一、 DOM上
1. DOM的概念
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。DOM是“Document Object Model”(文档对象模型)的首字母缩写。
1.1 DOM树
HTML文档中的所有节点组成了一个文档树模型,文档中的每个元素、属性、文本等都代表着树中的一个节点,再由这些节点组成一个树状结构(DOM Tree)。
1.2 节点关系
节点树中的节点彼此拥有层级关系。
我们常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
HTML文档中的每一个成分都是一个节点
- 整个文档是一个**文档节点**
- 每个HTML标签是一个**元素节点**
- 包含在HTML元素中的文本是**文本节点**
- 每一个HTML属性是一个**属性节点**
- 注释属于**注释节点**
1.3 节点属性
单词: node ,节点是分为多种类型的
节点种类: 元素节点、 属性节点、 文本节点 、 注释节点 、 文档节点
nodeType: 1 2 3 8 9 // 返回元素的节点类型
nodeName 分别是 : Element , Attr, #text , #comment、 #document // 返回元素名
nodeValue 分别是: null , 属性值, 文本, 注释文本, null // 返回元素的节点值
节点的几个属性: nodeName、nodeType 和 nodeValue。
document.getElementById("demo").tagName; // P
1.4 文档的写入
10-3.1 document.write()
10-3.2 document.writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符
1.5 查找元素
通过id属性值获取:document.getElementById() // 返回拥有指定ID的第一个对象的引用
通过标签名称获取:document.getElementsByTagName() // 返回带有指定标签名的对象的集合-数组
通过class属性值获取:document.getElementsByClassName() // 返回带有指定class名称的对象的集合-数组
通过name属性值获取:document.getElementsByName() // 返回带有指定name名称的对象的集合-数组
1.6 元素属性
元素.innerHTML // 属性设置或返回表格行的开始和结束标签之间的 HTML
元素.innerText // 从起始位置到终止位置的内容
元素.getAttribute(‘id’) // 获取属性
元素.setAttribute(‘class’,‘box’) // 设置属性
outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
总结
以上就是今天带你走进从零认识JavaScript到精髓(十五)JavaScript的文档对象模型DOM
会持续更新中…
原创不易,期待您的点赞关注与转发评论😜😜😜