1. 什么是 Windows?
Windows: 是一个全局对象, 代表浏览器中一个打开的窗口, 每个窗口都是一个 Windows 对象
2. 什么是 document?
document 是 Windows 的一个属性, 这个属性是一个对象
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 = Windows.getComputedStyle(oDiv);
- console.log(style.width);
DOM 操作
来源: http://www.bubuko.com/infodetail-3282648.html