学习笔记（9）DOM

1，dom简介

DOM：document object model（文档对象模型）。

dom结构：浏览器在打开一个html页面之后，会把html页面中的所有标签进行渲染，每一个标签都解析成一个对象，这些对象以树形的结构关联在一起，这种结构就是dom结构，也就是所谓的dom树。这些标签在解析之后会被存入到document中，document是页面主体标签的一个对象集合，叫做文档对象模型。

一切关于页面对象的操作，都需要经过document来访问，把标签以及样式通过dom转换成了对象或者是方法，js中不能直接操作html标签。

2，常见方法

document代表当前页面的对象。

1. getElementById：根据id来查找元素。查找到之后会以对象的形式返回。

let obj =document.getElementById("title");
console.log(obj)

2. getElementsByTagName：根据标签名查找符合的所有元素。返回一个列表。

列表不是真正的数组，但是可以像数组一样使用索引对元素进行访问，也可以使用长度。

let p1 =document.getElementsByTagName("p");

3. getElementsByClassName：根据class样式查找符合的元素，返回一个列表。

let lines =document.getElementsByClassName("line");

4. querySelector：根据样式选择器来查找某个元素。返回的是查询到的页面元素对象。

let hello =document.querySelector("#title");

5. querySelectorAll：根据样式选择器来查找所有满足条件的元素，返回列表。

let linqwe=document.querySelectorAll(".line")

3，dom操作元素

3.1，textContent与innerHTML的区别

textContent单一的显示文本，不去管文本内容，
innerHTML在设置内容的时候，会把内容中的标签解析为元素显示出来。

textContent

let p =document.createElement("p");
//给标签添加内容
p.textContent ="<h1>这是通过js语法创建的h1标签</h1>";
// p.innerHTML ="<h1>这是通过js语法创建的h1标签</h1>";
document.body.appendChild(p);

innerHTML

let p =document.createElement("p");
//给标签添加内容
// p.textContent ="<h1>这是通过js语法创建的h1标签</h1>";
p.innerHTML ="<h1>这是通过js语法创建的h1标签</h1>";
document.body.appendChild(p);

3.2，元素的添加和删除

1. createElement：创建标签，参数是标签名称。

let h1 =document.createElement("h1");
//给标签添加内容
h1.textContent ="这是通过js语法创建的h1标签";

2. appendChild：添加子元素。

/* document.body代表body对象。
* 下面代码的意思：把一个名为h1的标签添加到body对象中。
*/
document.body.appendChild(h1);

3. insertBefore：将一个标签作为子元素插入到另一个标签中。

/*
   insertBefore，2个参数:
   1参是要插入的元素对象，
   2参是插入到哪个元素之前。
*/
document.body.insertBefore(h2,firstTitle);

//parentElement：表示本元素的父元素对象.
console.log(firstTitle.parentElement);

4. removeChild，删除子元素。

document.body.removeChild(firstTitle);

3.3，js中访问元素的尺寸和位置

如果元素的样式是通过css设置的，不能通过style属性来获取。

1. 获取到元素展示的时候的宽高(包含边框)

console.log(box.offsetWidth);
console.log(box.offsetHeight);

2. 不含边框的宽高

console.log(box.clientWidth);
console.log(box.clientHeight);

3. 获取元素相对于离自己最近的position(必须是非static)。left：父元素的横坐标。top：纵坐标。

console.log(box.offsetLeft);
console.log(box.offsetTop);

4. 到内容区域的距离

console.log(box.clientLeft);
console.log(box.clientTop);

5. 获取浏览器工作区域的宽高

console.log(window.innerWidth);
console.log(window.innerHeight);

6. 获取浏览器窗口的宽高

console.log(window.outerWidth);
console.log(window.outerHeight);