1：DOM开篇
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>程序之美</title>
</head>
<body>
<script type="text/javascript">
console.log(window.document);
console.log(typeof window.document);
console.log(window.document.title);
</script>
</body>
</html>注意一下: window代表窗口.
document是window的一个属性.
因为document是window的一个属性,因为属性都是对象拥有的,所以他是一个object;
记住,document对象可以操作文档中的所有内容,所以这样写… window可以不写的哈.
效果:
2.获取DOM元素上
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>程序之美</title>
</head>
<body>
<div class="father">
<form action="">
<input type="text" name="test">
<input type="password" name="test" id="">
</form>
</div>
<div class="father" id="box">我是div</div>
<script type="text/javascript">
console.log("//1:通过id获取指定元素");
let q=document.getElementById("box");
console.log(q);
console.log(typeof q);
console.log("//2:通过类名称指定元素");
let w=document.getElementsByClassName("father");
console.log(w);
console.log("//3:通过name名称来获取");
let e=document.getElementsByName("test");
console.log(e);
console.log("4:通过标签名来获取");
let r=document.getElementsByTagName("div");
console.log(r);
console.log("5:通过选择器来获取一个");
let t=document.querySelector("div>form");
console.log(t);
console.log("6:通过选择器来获取全部的");
let y=document.querySelectorAll(".father");
console.log(y);
</script>
</body>注意一下,获取的如果加了s获取all的就是全部的.否则就是一个
效果：
2.获取DOM元素下
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>1</h1>
<h2>2</h2>
<p class="item">3</p>
<p>4</p>
<span>5</span>
</div>
<script type="text/javascript">
console.log("1.获取指定元素所有的子元素");
let q=document.querySelector("div");//指定元素
console.log(q.children);//div下所有的子元素
console.log("2:获取到的是指定元素中所有的节点");
console.log(q.childNodes);
console.log("遍历节点");
for(let node of q.childNodes)
{
if(node.nodeType===Node.ELEMENT_NODE)//遍历的节点类型如果是如果当前节点是元素节点的话。
{
console.log(node);
}
}
console.log("3:获取指定节点中的第一个子节点");
console.log(q.firstChild);
console.log("4:获取指定元素中的第一个子元素");
console.log(q.firstElementChild);
console.log("5:获取指定节点中最后一个子节点");
console.log(q.lastChild);
console.log("6:获取指定元素中最后一个子元素");
console.log(q.lastElementChild);
console.log("7.通过子元素获取父元素/父节点");
let item = document.querySelector(".item");
console.log(item.parentElement);
console.log(item.parentNode);
let parentEle=item.parentElement||item.parentNode;
console.log(parentEle);
console.log("获取相邻上一个节点");
console.log(item.previousSibling);
console.log(" 获取相邻上一个元素");
console.log(item.previousElementSibling);
console.log("获取相邻下一个节点");
console.log(item.nextSibling);
console.log("获取相邻下一个元素");
console.log(item.nextElementSibling);
</script>
</body>
</html>注意一下,这里最重要的是属性长，写注意一点哈 效果;
节点增删改查
html部分都是这里的代码.
代码语言：javascript复制 <div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>1.创建节点
代码语言：javascript复制let q=document.createElement("span");
console.log(q);
console.log(typeof q);效果：
2.添加节点
代码语言：javascript复制let e=document.querySelector("div");
e.appendChild(q);
let r=document.createElement("a");
e.appendChild(r);效果：
3：插入节点:
代码语言：javascript复制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);效果：
5.删除节点
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script type="text/javascript">
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oH1.parentNode.removeChild(oH1);
oP.parentNode.removeChild(oP);
</script>
</body>
</html>注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除 元素是不能够自杀的
效果：
6: 克隆节点
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
</div>
<script type="text/javascript">
let oDiv = document.querySelector("div");
let newDiv=oDiv.cloneNode(true);
document.body.append(newDiv);
</script>
</body>
</html>效果：
