javascript中的:DOM对象

Document Object Model（文档对象模型）简称DOM,可以随便的去修改网页的内容，实现各种网页特效,HTML 中的所有的标签都会当成对象来对待

目录

1. 获取 DOM 对象

2. 修改 DOM 对象

---

1. 获取 DOM 对象

• document.querySelector(css的选择器)

注:它只能获取符合 CSS 选择器【第1个元素】

// 1. 标签选择器
// 通过标签选择器获取 DOM 对象
let el = document.querySelector("div");
console.log(el); // 对象类型

// 2. 类选择器
// 通过类选择器获取 DOM 对象
let el2 = document.querySelector(".three");
console.log(el2); // 对象类型

// 3. 后代选择器
let el3 = document.querySelector("ul li");
console.log(el3);

// 4. 子选择器
let el4 = document.querySelector("ul > li");
console.log(el4);

• document.querySelectorAll(css的选择器)

注:它可以获取符合 CSS 选择器的【全部元素】

     如果需要对所有的元素进行操作，那就使用 document.querySelectorAll

• 其它 document.getElementsByTagName() document.getElementById() ... 

1. 使用 document.querySelector 在获取元素的时候，如果没有找到相关的 DOM 对象，得到的结果为 null
2. 使用 document.querySelectorAll() 会得到一个伪数组，如果没有找到是一个【空数组】
3. 如果获取到的 DOM 对象是一个伪数组，那么需要对它进行遍历才可以使用，遍历的方法同数组一模一样！！！

2. 修改 DOM 对象

• 修改内容

DOM对象.innerHTML、DOM对象.innerText 和 document.write()

1. innerHTML 和 innerText 区别就在于能否支持 html 标签的解析，innerHTML 能够解析，innerText 不能。

   // innerHTML可以包含标签
   el2.innerHTML='<strong>文字加粗</strong>'
   // innerText中包含标签不会被解析
   el2.innerText='<strong>我要文字加粗</strong>'

2. inner 内部的意思，指的是双标签中间的部分

•  修改属性

DOM对象.HTML的【标准属性】 

let picture = document.querySelector("img");
picture.src = "xxx.jpg";
let content = document.querySelector("input");
content.value = "xxx";
content.type = "xxx";