莆田网站建设解决方案新闻网最新消息
前言
DOM(Document Object Model) 文档对象模型，是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。简单来说DOM就是操作网页的api和接口。
一、Node类型属性
1.判断节点类型 nodeType 整数返回值 9 1 3 2
<div id="one">我是一个div<!-- 注释 --><span>行内元素</span></div><div id="two">我是第二个div</div><script>// 1.nodeType 返回节点类型 返回一个整数值 文档节点 返回9console.log(document.nodeType);// 获取div 通过id获取标签var div1 = document.getElementById('one');console.log(div1);console.log(div1.nodeType,'元素节点');console.log(div1.attributes.id.nodeType,'属性节点');
2.返回节点纯大写名称 nodeName DIV BODY
var div1 = document.getElementById('one');console.log(document.body.nodeName);
3.返回文本字符 nodeValue
console.log(div1.firstChild.nodeValue);
4.textContent 返回元素和后代元素文本内容
var div1 = document.getElementById('one');
console.log(div1.textContent)
5.nextSibling 获取同级节点下一个节点
var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div1.nextSibling,'获取后一个节点');
6.previousSibling 获取同级节点前一个节点
var div1 = document.getElementById('one');
var div2 = document.getElementById('two');
console.log(div2.previousSibling,'获取前一个节点');
7.获取父节点 parentNode
console.log(div1.parentNode);
8.获取父元素节点 parentElement
console.log(div1.parentElement);
9.获取元素的子节点 childNodes 类数组对象 包括文本注释...节点
console.log(div1.childNodes);
console.log(Array.isArray(div1.childNodes));
10.获取元素的元素节点 children 类数组对象
console.log(div1.children);
11.firstChild 获取元素第一个子节点
console.log(document.body.firstChild);
12.lastChild 获取元素最后一个子节点
console.log(document.body.lastChild);二、DOM操作方法
增删插替换都是由父元素调用
新增节点：appendChild(新节点)
//创建一个节点 createElement();
var div = document.createElement('div');
// 给元素 设置文本内容 innerHtml innerText
div.textContent = 'four';
document.body.appendChild(div);
插入节点：insertBefore(插入的节点,参考节点)
//插入节点 insertBefore(要插入的节点,参考节点)
var div = document.createElement('div');
div.textContent = 'four';
// 获取参考节点
console.log(document.body.children,'获取当前元素所有子元素节点');
var two = document.body.children[1];
document.body.insertBefore(div,two);
替换节点：replaceChild(替换的节点,被替换的节点)
/**
* 替换节点 replaceChild(替换的节点,被替换的节点)
*/
var div = document.createElement('div');
div.textContent = 'four';
var one = document.body.children[0];
document.body.replaceChild(div,one);
删除节点: removeChild(删除的节点)
/**
* 删除节点 removeChild(要删除谁)
*/
var two = document.body.children[1];
document.body.removeChild(two); 克隆节点 ：cloneNode(true/false);
要克隆谁 谁调用cloneNode true深克隆 既克隆节点样式以及内容
false只克隆节点样式不克隆内容
什么是深克隆，什么是浅克隆？
1.深克隆指的是既克隆节点的样式，还克隆节点的内容
2.浅克隆指的是只克隆节点的样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div>我是块级元素</div><script>var div = document.querySelector('div');// 克隆节点 cloneNode(true/flase) 默认是false 浅克隆 true 深克隆var newNode = div.cloneNode(true);document.body.appendChild(newNode);</script>
</body>
</html>