js基础之操作DOM
一、浏览器介绍
（1）BOM：浏览器对象模型
（2）javascript诞生就是为了让他能在浏览器中运行。
（3）window代表浏览器窗口
（4）Navigator，封装了浏览器的信息
大多数时候都不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码
（5）screen
屏幕的尺寸
（6）location（重要）
代表当前页面的URL信息
location.assgin('https://')//设置新的地址
自己在浏览器输入，就可以获取一些信息，学会在现有的工具中学习也很重要！！
（7）document
- 代表当前的页面(html，DOM文档树)
- 获取具体的文档树节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<dl id = 'code'>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>javascript</dd>
</dl>
<script>
var d = document.getElementById('code');//根据id获取文档树结点
</script>
</body>
</html>
- 客户端获取本地信息
劫持cookie原理
<script src="aa.js"></script>
<!--恶意人员：获取你的cookie上传到自己的服务器-->
服务器端可以设置cookie:httpOnly 就安全了！
（8）history
代表浏览器的历史记录，记住两个属性就可以了！
history.back()//后退
history.forward()//前进
二、操作DOM对象
整个浏览器网页就是一个DOM树形结构
- 更新：更新DOM结点
- 遍历dom结点：得到DOM结点
- 删除：删除一个DOM结点
- 添加：添加一个DOM结点
要操作一个DOM结点，就必须先获得这个DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="father">
<h1>title</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var t = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var f = document.getElementById('father');
var childrens = father.childrens;//获取父节点下所有子节点
var self = document.getElementById('p1')
</script>
</body>
</html>
1.更新DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="father">
<p id='con'></p>
</div>
<script>
var c = document.getElementById("con");
</script>
</body>
</html>
- 操作文本
con.innerText = '111'
con.innerHTML = '<strong>111</strong>'
- 操作css
con.style.color = 'pink';
con.fontSize = '20px';
2.删除节点
删除结点的步骤：先获取父结点，再通过父节点删除自己
var t = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var f = document.getElementById('father');
var self = document.getElementById('p1');
var father = self.parentElement;
var childrens = father.children; //获取父节点下所有子节点
father.removeChild(self);
插播一个小插曲：关于爸爸去哪里了？
在写代码的时候，我把var father = self.parentElement，写成了var father = parentElement，导致控制台报错parentElement is not defined。爸爸找不到了，我裂开了。然后仔细检查了一下，发现要找谁的爸爸没有写清楚，我要找self的爸爸，但是没有把self写进去。这个“找爸爸的故事”告诉我，计算机科学还是一门伦理哲学，要找谁的爸爸要写清楚不能只有爸爸，不是全天下的爸爸都是你要找的element的爸爸，也不是全天下的儿子都需要找爸爸。
attention：删除是一个动态的过程
下面写法是错误的，执行第一条语句后，孩子的顺序有改变了，所以会造成错误。
//删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
3.插入节点
我们获取某个节点，假设这个DOM节点是空的，我们可以通过innerHTML就可以增加一个新的元素，但是这个DOM节点已经存在元素了，我们就不能这么写，会覆盖。
- 追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="qianduan">qianduan</p>
<div id="list">
<p id="html">html</p>
<p id="css">css</p>
<p id="javascript">javascript</p>
</div>
<script>
//追加一个节点（已经存在）
var qianduan = document.getElementById('qianduan');
var list = document.getElementById('list');
</script>
</body>
</html>
- 创建一个新的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="qianduan">qianduan</p>
<div id="list">
<p id="html">html</p>
<p id="css">css</p>
<p id="javascript">javascript</p>
</div>
<script>
var qianduan = document.getElementById('qianduan');
var list = document.getElementById('list');
//创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'hello';
list.appendChild(newP);
</script>
</body>
</html>
- 创建一个标签节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="qianduan">qianduan</p>
<div id="list">
<p id="html">html</p>
<p id="css">css</p>
<p id="javascript">javascript</p>
</div>
<script>
var qianduan = document.getElementById('qianduan');
var list = document.getElementById('list');
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'hello';
list.appendChild(newP);
//创建一个新的标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
list.appendChild(myScript);
</script>
</body>
</html>
- js操作前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="qianduan">qianduan</p>
<div id="list">
<p id="html">html</p>
<p id="css">css</p>
<p id="javascript">javascript</p>
</div>
<script>
var qianduan = document.getElementById('qianduan');
var list = document.getElementById('list');
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'hello';
list.appendChild(newP);
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
list.appendChild(myScript);
var mystyle = document.createElement('style');
mystyle.setAttribute('type', 'text/css');
mystyle.innerHTML = 'body{background-color:pink}';
// document.getElementsByTagName('body')[0].appendChild(mystyle);
var head = document.getElementsByTagName('head');
head[0].appendChild(mystyle);
</script>
</body>
</html>
插播一个小插曲：关于洗完衣服需不需要晾起来？
在写上述代码的时候，忘记加上var head = document.getElementsByTagName(‘head’); head[0].appendChild(mystyle);我又粗心大意忘记把创建的节点挂到DOM树上了，就好比洗完衣服我却忘记把它晾到树枝上一个道理。所以大家写代码的时候，创建完成之后要记得把它挂DOM树上去晾干。
- inserBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p id="qianduan">qianduan</p>
<div id="list">
<p id="html">html</p>
<p id="css">css</p>
<p id="javascript">javascript</p>
</div>
<script>
var CSS = document.getElementById('CSS');
var qianduan = document.getElementById('qianduan');
var list = document.getElementById('list');
//insertBefor(newNode,targetNode)
list.insertBefore(qianduan,css);
</script>
</body>
</html>
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
