一 1概念：DOM：Document Object Model 文档对象模型 （创建，添加，删除，替换，查找，获取）
2 DOM树：浏览器在解析html文档的时候，为了让他们的层次更明显，将html解析成DOM树的形式，页面当中所有的内容组成了DOM树(DOM树是由节点组成)。
注：节点：页面当中所有的内容都可以称之为节点（元素节点，文本节点，注释节点,...）
一.节点获取（获取到的是一个集合，获取不到返回空集合，获取到的是一个具体的节点，获取不到返回null ）
1.获取直接子节点
-
父元素.children; 获取直接元素子节点
-
返回值：标准浏览器下（HTMLCollection(3) [ul, p, span]） 元素集合
-
兼容问题：IE8及以下会将注释节点获取到
-
-
父元素.childNodes; 获取直接子节点
-
返回值:NodeList(length) 节点集合 在标准浏览器下会将换行及空格当做文本节点
-
返回的内容跟页面结构有关系（换行及空格）
-
兼容：IE8及以下不将换行及空格作为文本节点 （span后的空格作为文本节点）
-
2.节点属性
| nodeType(节点类型) | nodeName(节点名称) | nodeValue(节点值) |
|---|---|---|
| 1 （元素节点） | 大写的标签名 | null |
| 3 （文本节点） | #text | 文本内容 |
| 8（注释节点） | #comment | 注释内容 |
| 9（文档节点） | #document | null |
3.获取父节点
元素节点.parentNode;
var div = document.getElementsByTagName("div")[0];
console.log(div.parentNode);
console.log(div.parentNode.parentNode);
console.log(div.parentNode.parentNode.parentNode);
console.log(div.parentNode.parentNode.parentNode.parentNode);4.获取相邻节点
IE8及以下不将换行及空格作为文本节点,带有Element没有这个属性IE8及以下，对应的值是undefined
-
父节点.firstChild; 获取第一个子节点
-
父节点.fistElementChild; 获取第一个元素节点
-
父节点.lastChild; 获取最后一个子节点
-
父节点.lastElementChild; 获取最后一个元素节点
-
相邻节点.previousSibling; 获取上一个相邻节点
-
相邻节点.previousElementSibling; 获取上一个相邻元素节点
-
相邻节点.nextSibling; 获取下一个相邻节点
-
相邻节点.nextElementSibling; 获取下一个相邻元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<p>哈喽</p>
<li>1</li>
<li>2</li>
<li id="test">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
var ul = document.getElementsByTagName("ul")[0];
// firstChild; 获取第一个子节点
// IE8及以下不将换行及空格作为文本节点
console.log(ul.firstChild);
console.log(ul.firstChild);
// fistElementChild; 获取第一个元素节点
// 不兼容：E8及以下没有这个属性
console.log(ul.firstElementChild);
console.log(ul.firstElementChild);
// lastChild; 获取最后一个子节点
// IE8及以下不将换行及空格作为文本节点
console.log(ul.lastChild);
console.log(ul.lastChild);
// lastElementChild; 获取最后一个元素节点
// 不兼容：E8及以下没有这个属性
console.log(ul.lastElementChild);
console.log(ul.lastElementChild);
var test = document.getElementById("test");
var test = document.getElementById("test");
// previousSibling; 获取上一个相邻节点
// IE8及以下不将换行及空格作为文本节点
console.log(test.previousSibling);
console.log(test.previousSibling);
// previousElementSibling; 获取上一个相邻元素节点
// 不兼容：E8及以下没有这个属性
console.log(test.previousElementSibling);
console.log(test.previousElementSibling);
var test = document.getElementById("test");
var test = document.getElementById('test');
// nextSibling; 获取下一个相邻节点
// IE8及以下不将换行及空格作为文本节点
console.log(test.nextSibling);
console.log(test.nextSibling);
// nextElementSibling; 获取下一个相邻元素节点
// 不兼容：E8及以下没有这个属性
console.log(test.nextElementSibling);
console.log(test.nextElementSibling);
</script>
</body>
</html>5.获取元素的其它方式
context:限定获取范围，可以是document也可以自己去限定
IE7及以下兼容，没有这个属性
-
context.querySelector("css选择器");
-
获取到了是具体的元素，如果多个符合，只能获取到符合条件的第一个
-
-
context.querySelectorAll("css选择器");
-
获取到返回nodeList(length)；
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="myUl">
<p>哈喽</p>
<li>1</li>
<li>2</li>
<li class="test">3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="myUl">
<p>哈喽</p>
<li>1</li>
<li>2</li>
<li class="test">3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="myUl">
<p>哈喽</p>
<li>1</li>
<li>2</li>
<li class="test">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// var ul = document.querySelector(".myUl");
var ul = document.querySelector(".myUl");
console.log(ul);
// var olis= ul.querySelectorAll("li");
// console.log(olis);
var oLis = ul.querySelectorAll("li");
console.log(oLis); //NodeList(5) [li, li, li.test, li, li]
</script>
</body>
</html>二.节点操作
操作已经存在节点，会发生物理偏移
1.节点创建
-
document.createElement(“标签名”); 创建元素节点
-
document.createTextNode(“文本”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
1.节点创建
- document.createElement(“标签名”); 创建元素节点
- document.createTextNode(“文本”);
*/
var div = document.createElement("div");
console.log(div);
console.log(div.innerHTML);
div.innerHTML = "我是div";
console.log(div.innerHTML);
var text = document.createTextNode("哈哈哈");
console.log(text);
console.log(typeof text);
console.log(text.toString());
// 创建的节点的都是对象 赋值的时候先转为字符串 [object Object]
div.innerHTML = text;
console.log(div);
var obj = { name: "哈哈" };
console.log(obj);
console.log(obj.toString()); //"[object Object]"
</script>
</body>
</html>
2.节点的添加
-
父节点.appendChild(添加节点); 在父元素的末尾进行添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
哈哈哈哈哈
</ul>
<script>
var ul = document.querySelector("ul");
var ul = document.querySelector("ul");
// 创建元素节点
var li = document.createElement("li");
var li = document.createElement("li");
li.innerHTML = "我是新创建的";
console.log(li);
// 操作已经存在节点，会发生物理偏移
// 添加
// 父节点.appendChild(子节点); 在父元素的末尾进行添加
// 添加新创建的
ul.appendChild(li);
ul.appendChild(li);
// 添加已经存在节点
ul.appendChild(ul.firstElementChild);
</script>
</body>
</html>
3.节点插入
-
父节点.insterBefore(newEle,refEle); 在参考元素之前进行插入
-
newEle：插入元素
-
refEle：参考元素
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol></ol>
<script>
var ul = document.querySelector("ul");
var ol = document.querySelector("ol");
// 父节点.insterBefore(newEle,refEle); 在参考元素之前进行插入
var li = document.createElement("li");
li.innerText = "测试";
var li = document.createElement("li");
li.innerHTML="ceshi"
// 插入新创建
ul.insertBefore(li, ul.children[1]);
ul.insertBefore(li,ul.children[1]);
// 操作已经存在节点，会发生物理偏移
// 插入原来存在的
ul.insertBefore(ul.lastElementChild, ul.firstElementChild);
// 没有参考元素默认在当前父元素的末尾进行插入 第二参数可以是undefined或null
// ul.insertBefore(ul.firstElementChild,null);
ol.insertBefore(ul.firstElementChild, null);
</script>
</body>
</html>
4.节点替换
-
父节点.replaceChild(newEle,refEle);
-
newEle：替换元素
-
efEle：被替换元素
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
/*
父节点.replaceChild(newEle,refEle);
- newEle：替换元素
- refEle：被替换元素
*/
var ul = document.querySelector("ul");
var ul = document.querySelector("ul");
var li = document.createElement("li");
li.innerHTML = "哈喽";
var li = document.createElement("li");
li.innerHTML = "哈喽";
ul.replaceChild(li, ul.firstElementChild)
ul.replaceChild(li, ul.firstElementChild);
ul.replaceChild(ul.lastElementChild, ul.firstElementChild);
ul.replaceChild(ul.firstElementChild, ul.firstElementChild);
</script>
</body>
</html>
5.删除节点
-
remove(); 删除节点本身
-
父元素.removeChild(子元素);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
/*
- remove(); 删除节点本身
- 父元素.removeChild(子元素);
*/
var ul = document.querySelector("ul");
var ul = document.querySelector("ul");
ul.onclick = function () {
ul.removeChild(ul.lastElementChild);
}
ul.onclick = function () {
// ul.remove();
ul.removeChild(ul.lastElementChild);
}
</script>
</body>
</html>
6.克隆节点
-
cloneNode([false]); 复制
-
[false] 默认值是false 只克隆标签不克隆内容
-
true:将内容一起克隆
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
/*
cloneNode([false]); 复制
- [false] 默认值是false 只克隆标签不克隆内容
- true:将内容一起克隆
*/
var ul = document.querySelector("#ul");
var res = ul.cloneNode(true);
console.log(res);
</script>
</body>
</html>
7.操作元素结构上的属性
既可以是天生自带属性也可以是自定义属性
-
setAttribute(attr,val); 设置
-
getAttribute(attr); 获取
-
removeAttribute(attr);删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<button>设置</button>
<button>获取</button>
<button>删除</button>
<!-- <input type="checkbox" checked="checked"/> -->
<input type="checkbox"/>
<script>
/*
- setAttribute(attr,val); 设置
- getAttribute(attr); 获取 获取不到返回null
- removeAttribute(attr);删除
*/
var div = document.querySelector("div");
var btns = document.querySelectorAll("button");
// 操作元素结构上的属性
btns[0].onclick = function(){
div.setAttribute("class","myBox");
div.setAttribute("title","我是div");
div.setAttribute("hello","哈喽");
div.setAttribute("test","测试");
}
btns[1].onclick = function(){
console.log(div.getAttribute("class"));
console.log(div.getAttribute("hello"));
}
btns[2].onclick = function(){
div.removeAttribute("title");
div.removeAttribute("test");
}
var input = document.querySelector("input");
// 获取
// console.log(input.checked);
input.checked = true;
// console.log( input.getAttribute("checked"));
// input.setAttribute("checked","checked");
</script>
</body>
</html>
4214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
