DOM操作

1.什么是window?

window：是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个window对象

2.什么是document?

document是window的一个属性, 这个属性是一个对象

document: 代表当前窗口中的整个网页,

document对象保存了网页上所有的内容, 通过document对象就可以操作网页上的内容

3.什么是DOM?

DOM 定义了访问和操作 HTML文档(网页)的标准方法

DOM全称: Document Object Model, 即文档模型对象

所以学习DOM就是学习如何通过document对象操作网页上的内容

4.获取Dom元素

• 通过id获取指定元素：document.getElementById("");
• 通过class名称获取：document.getElementsByClassName("father");
• 通过name名称获取：document.getElementsByName("test");
• 通过标签名称获取：document.getElementsByTagName("div");
• 通过选择器获取：document.querySelector("#box");  注意：（querySelector只会返回根据指定选择器找到的第一个元素）　document.querySelectorAll(".father");  注意：（querySelectorAll会返回指定选择器找到的所有元素）

5.节点

DOM对象(document), 这个对象以树的形式保存了界面上所有的内容，HTML页面每一部分都是由节点(标签(元素),文本,属性)

获取指定节点中的第一个子节点
let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);
获取指定元素中的第一个子元素
console.log(oDiv.firstElementChild);

获取指定节点中最后一个子节点
console.log(oDiv.lastChild);
获取指定元素中最后一个子元素
console.log(oDiv.lastElementChild);

通过子元素获取父元素/父节点
let item = document.querySelector(".item");
console.log(item.parentElement);
console.log(item.parentNode);
let parentEle = item.parentElement || item.parentNode;
console.log(parentEle);

获取相邻上一个节点
console.log(item.previousSibling);
获取相邻上一个元素
console.log(item.previousElementSibling);

获取相邻下一个节点
console.log(item.nextSibling);
获取相邻下一个元素
console.log(item.nextElementSibling);

6：节点的增删改查

1.创建节点
let oSpan = document.createElement("span");
console.log(oSpan);
console.log(typeof oSpan);

2.添加节点
注意点: appendChild方法会将指定的元素添加到最后
let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);

3.插入节点
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oH1);
oDiv.insertBefore(oSpan, oP);

4.删除节点
注意点: 在js中如果想要删除某一个元素,元素是不能自杀的，只能通过对应的父元素来删除
console.log(oSpan.parentNode);
oSpan.parentNode.removeChild(oSpan);
oDiv.parentNode.removeChild(oDiv);

5.克隆节点
注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true
let oDiv = document.querySelector("div");
let newDiv =  oDiv.cloneNode();
let newDiv =  oDiv.cloneNode(true);
console.log(newDiv);

7.元素属性操作

原理：无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们,系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中,所以只要拿到这个对象就可以拿到标签属性,操作标签属性

let oImg = document.querySelector("img");
let oImg = document.createElement("img");
console.dir(oImg);


// 1.如何获取元素属性
let oImg = document.querySelector("img");
// console.log(oImg.alt);
// console.log(oImg.getAttribute("alt"));
// 注意点: 通过对象.属性名称的方式无法获取到自定义属性的取值
//         通过getAttribute方法可以获取到自定义属性的取值
console.log(oImg.nj);
console.log(oImg.getAttribute("nj"));


// 2.如何修改元素属性
let oImg = document.querySelector("img");
// oImg.title = "新的title";
// oImg.setAttribute("title", "新的title222");
// 注意点和获取元素属性一样
// oImg.nj = "123";
oImg.setAttribute("nj", "123");


// 3.如何新增元素属性
let oImg = document.querySelector("img");
// oImg.it666 = "itzb";
// 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
oImg.setAttribute("it666", "itzb");


// 4.如何删除元素属性
let oImg = document.querySelector("img");
// oImg.alt = "";
// oImg.removeAttribute("alt");
// 注意点和获取元素属性一样
// oImg.nj = "";
oImg.removeAttribute("nj");

 8.元素内容操作

// 1.获取元素内容
1.innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
2.innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格

let oDiv = document.querySelector("div");
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
console.log(oDiv.textContent);

// 2.设置元素内容
特点:
无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容
区别:
如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置

let oDiv = document.querySelector("div");
// oDiv.innerHTML = "123";
// oDiv.innerText = "456";
// oDiv.textContent = "789";
//  oDiv.innerHTML = "<span>我是span</span>";
//  oDiv.innerText = "<span>我是span</span>";
//  oDiv.textContent = "<span>我是span</span>";

setText(oDiv, "www.it666.com");
function setText(obj, text) {
    if("textContent" in obj){
        obj.textContent = text;
    }else{
        obj.innerText = text;
    }
}

9.操作元素样式

// 1.设置元素样式
let oDiv = document.querySelector("div");
// 第一种方式
// 注意点: 由于class在JS中是一个关键字, 所以叫做className
// oDiv.className = "box";
// 第二种方式
// 注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
// 注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "blue";

// 2.获取元素样式
let oDiv = document.querySelector("div");
// oDiv.style.width = "300px";
// 注意点: 通过style属性只能过去到行内样式的属性值, 获取不到CSS设置的属性值
// console.log(oDiv.style.width);
// 注意点: 如果想获取到CSS设置的属性值, 必须通过getComputedStyle方法来获取
// getComputedStyle方法接收一个参数, 这个参数就是要获取的元素对象
// getComputedStyle方法返回一个对象, 这个对象中就保存了CSS设置的样式和属性值
let style = window.getComputedStyle(oDiv);
console.log(style.width);