【前端】JavaScript学习笔记（五）——操作BOM与DOM对象

2021-12-10 12:32:07

✨课程链接

✨学习笔记

操作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>

⭐转载请注明出处

本文作者：双份浓缩馥芮白

原文链接：https://www.cnblogs.com/Flat-White/p/15028137.html

码农公寓