第十七课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="17.js"></script>
</head>
<body>
<div>
<!-- LZ树状图在线生成器 lizibuluo.com/tree/ -->
div1
<p>p1</p>
<p>p2</p>
div2
</div>
</body>
</html>
js
// DOM -> 文档对象模型
// DOM树:
// html文件 -》人 -》 网页的数据
// 浏览器 -》数据结构 -》方便 查找 修改 遍历 操作
// 样子 -》树形
// DOM
// 数据结构:
// 线性: 单链表 循环链表 队列 栈 数组
// 树形: 二叉树 平衡树 红黑树
// 网状: 有向图 无向图 -》 寻路算法 A*算法
第十八课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="18.js"></script> -->
</head>
<body>
<div id="div1">
<!-- LZ树状图在线生成器 lizibuluo.com/tree/ -->
div1
<p id="p1">p1</p>
<p id="p2">p2</p>
<p class="text1">p1</p>
<p class="text2">p2</p>
div2
</div>
</body>
<script src="18.js"></script>
</html>
js
// DOM树
// document 节点:只有一个
// 标签节点 元素节点:
// 文本节点:
// 标签节点 元素节点 : 样子 样式
// 找到这些节点
// 3种最常用的方法:
// 1.通过ID来查找
// 2.通过标签名字来查找
// 3.通过class来查找
// id -》 唯一性
// var div1 = document.getElementById("div1");
// var div1 = document.getElementById("p1"); 节点
// js 时间线
// var div = document.getElementsByTagName("div"); //返回数组
// var ps = document.getElementsByTagName("p");
// var p1 = ps[0]; //节点
// var ps = document.getElementsByClassName("text"); //数组
// ps[0];节点
// 1. id -》 节点
// tag class -》数组
// 2.id -》document.getElementById
// tag class -> 在标签任意节点上使用
var div1 = document.getElementById("div1");
var ps = div1.getElementsByClassName("text1");
第十九课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src="19.js"></script> -->
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
</div>
<script src="19.js"></script>
</body>
</html>
js
// 创建节点 添加到DOM树 删除节点
var dic1 = document.getElementById("div1");
// 创建一个p标签
var p = document.createElement("p");
// 创建一个文本节点
var p1text = document.createTextNode("p1");
p.appendChild(p1text);
// 添加节点
div1.appendChild(p);
// 删除div2
// var div2 = document.getElementById("div2");
// div1.removeChild(div2);
// 删除div2
var div2 = document.getElementById("div2");
// div2.parentNode;
// 自己把自己删除
// div2.parentNode.removeChild(div2);
第二十课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1" dat="1">
<img id="img1" class="box" src="logo.png" alt="">
<p id="p1">P1</p>
</div>
<script src="20.js"></script>
</body>
</html>
js
// 对节点的属性 内容
// html 定义好的属性 . 对象的点 获取 修改
var img1 = document.getElementById("img1");
// class js 关键词 类 用classname代替
// img1.className =
// css 样式的修改
// img1.style.width = "100px";
// 获取属性
// img1.getAttribute("id");
// img1.getAttribute("dat");
// img1.setAttribute("dat","11");
// img1.removeAttribute("dat");
var p1 = document.getElementById("p1");
// p1.innerHTML = "这是innerhtml";
// p1.innerHTML = "这是innerhtml <a href='www.baidu.com'>this is a </a>";
p1.textContent = "这是innerhtml <a href='www.baidu.com'>this is a </a>";