DOM学习笔记

目录

（一）、DOM简介

（二）获取界面元素

2.1、获取页面元素

2.2、通过关系获取节点

2.3、直接获取的方式

---

（一）、DOM简介

1.1、什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

• 文档：一个页面就是一个文档，DOM 中使用 document 表示

• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示

• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 DOM 把以上内容都看做是对象

（二）获取界面元素

2.1、获取页面元素

document节点指的是界面所有节点信息汇总

获取页面中的元素可以使用以下几种方式:

• 根据 ID 获取

• 根据标签名获取

• 通过 HTML5 新增的方法获取

• 特殊元素获取

2.2.1、H5获取界面节点的方式:

①document.querySelector("放选择器")

• 符合选择器的第一个元素

• 没找到返回null

②document.querySelectorAll("放选择器")

• 符合选择器的第所有元素

• 默认找类数组

• 后面加索引找具体某一个值

• 没有返回[]

         console.log(document.querySelector('p'));
         console.log(document.querySelectorAll('p'[3]));

2.2.2、直接获取界面节点的方式

①document.getElementById（“id名”）

• （查找速度最快）根据Id名字

• 没找到返回null

②document.getElementsByClassName("class名")

• 根据class值

• 类数组

③document.getElementsByTagName（“标签名字”）

• 根据标签名字

• 类数组

④document.getElementsByName（”name值“）

• 根据name 值

• 类数组

document.getElementsByTagName	（查找速度最快）根据标签名字,类数组
document.getElementsByClassName	根据class值,类数组
document.getElementById	根据id 值,节点对象
document.getElementsByName	根据name 值,类数组

         //根据标签名字获取节点，取出来为类数组
         let p1 = document.getElementsByTagName('p');
         console.log(p1[1].nodeName);
 ​
         //根据类名字获取节点，取出来为类数组
         let p2 = document.getElementsByClassName('three')
         console.log(p2);
 ​
         //根据id获取节点，取出来为节点对象
         let p3 = document.getElementById('four')
         console.log(p3);
 ​
         //根据name值获取节点，取出来类数组
         console.log(document.getElementsByName('text1'));//对象

2.2、通过关系获取节点

父
.parentElement	获取父节点

 //获取父节点 console.log(document.querySelector('li').parentElement);

子
.children	子元素们，只包含选择出来的标签，类数组
.childNodes	子节点们，包含文本，类数组

  //获取孩子节点   console.log(document.querySelector('ul').childNodes);//包含文本，类数组     console.log(document.querySelector('ul').children);//只包含选择出来的标签，类数组

兄弟
.previousElementSibling	对象 前一个兄弟节点
.previousSibling	对象 前一个兄弟节点 包括文本
.nextSibling	对象 后一个兄弟节点 包括文本
.nextElementSibling	对象 后一个兄弟节点

  //获取兄弟节点
 console.log(document.querySelectorAll('li')[1].previousElementSibling);//对象 前一个兄弟节点
 console.log(document.querySelector('li').previousSibling);//对象 前一个兄弟节点 包括文本
 console.log(document.querySelector('li').nextSibling);//对象 后一个兄弟节点 包括文本
 console.log(document.querySelector('li').nextElementSibling);//对象 后一个兄弟节点 

2.3、直接获取的方式

 document.body  //body标签
 document.forms  //form表单们
 document.anchors //a标签们
 document.images //图片们
 document.links //连接们
 document.URL //当前文档的网址

删除节点

node.remove()
parent.removeChild(子级node)
node.innerHTML=""
parent.replaceChild(newNode,oldNode)

新增节点

node.append(节点)
node.appendChild(节点)
node.innerHTML+="新节点"