【前端】JavaScript学习笔记（五）——操作BOM与DOM对象
✨课程链接
【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili
✨学习笔记
操作BOM对象
window（⭐）
window 代表浏览器窗口
window.innerHeight
936
window.innerWidth
1365
window.outerHeight
1040
window.outerWidth
1920
Navigator
Navigator 封装了浏览器的信息
大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
location（⭐）
location 代表当前页面的URL信息
location.reload() // 刷新网页
location.assign("...") // 设置新的地址
document
document 代表当前的页面 HTML DOM文档树
获取具体的文档树节点
<dl id="test">
<dt>Java</dt>
<dt>Python</dt>
</dl>
<script>
var dl = document.getElementById("test")
console.log(dl)
</script>
获取cookie
document.cookie
劫持cookie原理
<script src = "temp.js"></script>
获取cookie上传到服务器
服务器端可以设置 cookie: httpOnly
history
history 代表浏览器的历史记录
history.back()
history.forward()
操作DOM对象
获得DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
// 对应CSS选择器
var h1 = document.getElementsByTagName("h1")
var p1 = document.getElementById("p1")
var p2 = document.getElementsByClassName("p2")
var father = document.getElementById("father")
var children = father.children
father.firstChild
father.lastChild
</script>
</body>
</html>
更新DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="id1">
</div>
<script>
// 操作文本
var id1 = document.getElementById("id1")
id1.innerText = "修改文本的值"
id1.innerHTML = '<strong>修改文本的值</<strong>'
// 操作CSS
id1.innerText = "默认值"
id1.style.color = "red"
id1.style.fontSize = "20px"
id1.style.padding = "2em"
</script>
</body>
</html>
删除DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName("h1")
// 先获取父节点 再通过父节点删除自己
var self = document.getElementById("p1")
var father = self.parentElement
father.removeChild(self)
// 动态删除：删除多个节点的时候 children是在时刻变化的 删除节点的时候一定要注意
father.removeChild(father.children[0])
</script>
</body>
</html>
创建和插入DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 获得某个DOM节点 假设这个DOM节点为空 可以通过innerHTML增加元素 若这个DOM节点已经存在元素了 会产生覆盖-->
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
// ！发现IDEA.var后缀补全的带";"
// 了解了下JS分号相关 决定之后还是都加分号吧
var js = document.getElementById('js');
var list = document.getElementById('list');
// 追加
list.appendChild(js);
// 新建节点
var newP = document.createElement('p'); // 创建p标签
// newP.setAttribute('id', 'newP');
newP.id = 'newP';
newP.innerText = 'creat success';
list.appendChild(newP);
// 创建标签节点 (通过Attribute可以设置任何的值)
var newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
list.appendChild(newScript);
// 创建一个Style标签
var newStyle = document.createElement('style');
newStyle.setAttribute('type', 'text/css');
newStyle.innerHTML = 'body{background-color:red}';
document.getElementsByTagName('head')[0].appendChild(newStyle);
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode, targetNode)
list.insertBefore(js, ee);
</script>
</body>
</html>
表单
操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>表单
<ul>
<li>文本框 text</li>
<li>下拉框 select</li>
<li>单选框 radio</li>
<li>多选框 checkbox</li>
<li>隐藏框 hidden</li>
<li>密码框 password</li>
</ul>
</div>
<form action="#" method="post">
<p>
<span>用户名 </span><input type="text" id="username">
</p>
<p>
<!-- 多选框的值就是定义好的value值-->
<span>性 别 </span>
<input type="radio" name="sex" value="man" id="man">男
<input type="radio" name="sex" value="woman" id="woman">女
</p>
<input type="submit">
</form>
<script>
// 得到输入框的值
var inputText = document.getElementById('username');
var manRadio = document.getElementById('man');
var womanRadio = document.getElementById('woman');
// 修改
inputText.value = 'test';
// 对于单选框 多选框等等固定的值 .value只能取到当前的值
console.log(manRadio.value)
// 查看返回结果 true -> 被选中
console.log(manRadio.checked)
</script>
</body>
</html>
提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--提交表单 MD5加密密码 表单优化-->
<!--表单绑定提交事件
onsubmit= 绑定一个提交检测的函数，true/false
将这个结果返回给表单 使用 onsubmit接收
onsubmit="return logIn()"
-->
<form action="https://wwww.baidu.com/" method="post" onsubmit="return logIn()">
<p>
<span>用户名 </span><input type="text" id="username" name="username">
</p>
<p>
<!-- <span>密   码 </span><input type="text" id="password" name="password">-->
<span>密   码 </span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定事件-->
<!-- onclick 被点击-->
<!-- <button type="submit" onclick="logIn()">提交</button>-->
<button type="submit">提交</button>
</form>
<script>
function logIn() {
alert('submit')
var usrname = document.getElementById('username');
var passwd = document.getElementById('input-password');
var md5passwd = document.getElementById('md5-password');
// MD5 加密
// passwd.value = md5(passwd.value);
// 提交瞬间会变长（MD5加密）
passwd.value = md5(passwd.value);
// 提交瞬间不会变长
md5passwd.value = md5(passwd.value);
// 可以校验判断表单内容 true -> 通过提交, false -> 阻止提交
return true;
}
</script>
</body>
</html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/15028137.html
版权所有，如需转载请注明出处。
