JavaScript DOM基础

DOM

什么是window

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

什么是document

• document是window的一个属性, 这个属性是一个对象
• document代表当前窗口中的整个网页内容，保存了当前网页上所有的内容
• 通过document对象就可以操作网页上的内容

什么是DOM

• DOM 定义了访问和操作 HTML文档(网页)的标准方法
• DOM(Document Object Model), 即文档模型对象
• 学习DOM就是学习如何通过document对象操作网页上的内容

DOM元素节点操作

DOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)

获取元素

通过id获取指定元素

由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回null

// 获取当前页面上id为box的元素
let oDiv = document.getElementById('box');

通过class名称获取

由于class可以重复,所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

// 获取当前页面上的所有的class为father的元素
let oDivs = document.getElementsByClassName("father");

通过name名称获取

由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

// 获取当前页面上的所有的name为test的元素
let oDivs = document.getElementsByName("test");

通过标签名称获取

由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组

// 获取当前页面上的所有的div元素
let oDivs =  document.getElementsByTagName("div");
console.log(oDivs);

通过选择器获取

• querySelector只会返回根据指定选择器找到的第一个元素
• querySelectorAll会返回指定选择器找到的所有元素
• CSS中的选择器在这里同样适用

// 获取当前页面上的class为father的第一个元素
let oDiv = document.querySelector(".father");
// 获取当前页面上的第一个div元素
let oDiv = document.querySelector("div");
// 获取当前页面上的class为father的所有元素
let oDivs = document.querySelectorAll(".father");

获取指定元素所有的子元素

• children属性获取到的是指定元素中所有的子元素
• childNodes属性获取到的是指定元素中所有的节点

let oDiv = document.querySelector(".father");
// 通过children属性获取class为father的所有子元素
console.log(oDiv.children);
// 通过childNodes属性获取class为father的所有节点
console.log(oDiv.childNodes);
// 通过childNodes获取指定元素中所有的子元素
for (let node of oDiv.childNodes){
    if (node.nodeType === Node.ELEMENT_NODE){
        console.log(node);
    }
} 

获取节点

获取指定节点中的第一个子节点/子元素

let oDiv = document.querySelector("div");
// 通过firstChild属性获取第一个div的第一个子节点
console.log(oDiv.firstChild);
// 通过firstElementChild属性获取第一个div的第一个子元素
console.log(oDiv.firstElementChild)

获取指定节点中的最后一个子节点/子元素

let oDiv = document.querySelector('div');
// 通过lastChild属性获取第一个div的第一个子节点
console.log(oDiv.lastChild);
// 通过lastElementChild属性获取第一个div的第一个子元素
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);

获取相邻上一个节点/元素

let item = document.querySelector(".item");
// 获取相邻上一个节点
console.log(item.previousSibling);
// 获取相邻上一个元素
console.log(item.previousElementSibling);

获取相邻下一个节点/元素

let item = document.querySelector(".item");
// 获取相邻下一个节点
console.log(item.nextSibling);
// 获取相邻下一个元素
console.log(item.nextElementSibling);

元素增删改查

<div>
    <p>111</p>
    <h5>222</h5>
</div>

创建节点

// 创建一个span元素，返回一个对象
let oSpan = document.createElement("span");
console.log(typeof oSpan); // object

添加节点

// appendChild方法会将指定的元素作为子元素添加到指定元素最后  
let oDiv = document.querySelector("div");
// 将span添加到div的最后
oDiv.appendChild(oSpan)
/*
添加后html结构
<div>
    <p>111</p>
    <h5>222</h5>
    <span></span>
</div>
*/

插入节点

let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oP = document.querySelector("p");
// 将span元素插入到div中的p元素前面
oDiv.insertBefore(oSpan, oP);
/*
添加后html结构
<div>
    <span></span>
    <p>111</p>
    <h5>222</h5>
</div>
*/

删除节点

// 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除
let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
oSpan.parentNode.removeChild(oSpan);

克隆节点

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

元素属性操作

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

<img src="js.jpg" alt="js" title="jss" jw="666">

获取元素属性

let oImg = document.querySelector('img');
console.log(oImg.title);   // js
console.log(oImg.getAttribute('title'));  // js
// 通过对象.属性名称的方式无法获取到自定义属性的取值
console.log(oImg.jw);   // undefined
// 通过getAttribute方法可以获取到自定义属性的取值
console.log(oImg.getAttribute("jw"));  // 666

修改元素属性

let oImg = document.querySelector("img");
oImg.alt = "java";
oImg.setAttribute("alt", "java");
// 通过对象.属性名称的方式无法修改到自定义属性的取值
oImg.jw = "123";
// 通过getAttribute方法可以修改到自定义属性的取值
oImg.setAttribute("jw", "123");

新增元素属性

 let oImg = document.querySelector("img");
// 通过对象.属性名称的方式无法新增自定义属性
// oImg.cat = "123";
// setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
oImg.setAttribute("cat", "123");

删除元素属性

let oImg = document.querySelector("img");
oImg.alt = "";
oImg.removeAttribute("alt");
// 通过对象.属性名称的方式无法删除自定义属性
// oImg.jw = "";
// 通过removeAttribute方法可以删除自定义属性
oImg.removeAttribute("jw");

元素内容操作

获取元素内容

• innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
• innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格

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

设置元素内容

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

let oDiv = document.querySelector("div");
oDiv.innerHTML = '<span>abcd</span>'; 
oDiv.innerText = "<span>efgh</span>";
oDiv.textContent = "<span>lmn</span>";

// innerText与textContent并不是所得的浏览器都支持
// 企业开发中推荐使用兼容性写法
function setText(obj,text){
    if ('innerText' in obj){
        obj.innerText = text;
    }else{
        obj.textContent = text;    
    }
} 

操作元素样式

设置元素样式

let oDiv = document.querySelector("div");
// 通过className设置
// 即给获取到的对象添加一个class属性
oDiv.className = "box";

// 通过style直接设置
// 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
oDiv.style.width = "300px";
oDiv.style.height = "300px";
oDiv.style.backgroundColor = "blue";

获取元素样式

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);