JavaScript学习—DOM对象、节点_浏览器 document 对象刷新-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46270220/article/details/120523428

本文介绍了如何通过DOM对象操作浏览器网页，包括window、navigator、screen和location对象的使用，ID、Class选择器的应用，以及DOM节点的获取、更新、删除和创建。重点讲解了标签选择器、DOM节点操作实例和表单元素的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

常见的DOM对象

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
444

navigator

封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
navigator.platform
'MacIntel'

screen

screen.height
900
screen.width
1440

location

host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/?tn=62095104_19_oem_dg"
reload: ƒ reload()  //刷新页面

location.assign('http://blog.shyshy.site') //跳转网页

document

document代表当前页面，HTML DOM文档树

document.title
'百度一下，你就知道'
document.title='Lum1n0us'
'Lum1n0us'

获取具体的文档树节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
    <dl id="form">
      <dd>java</dd>
        <dd>python</dd>
        <dd>js</dd>
    </dl>
<script>
    var dl = document.getElementById("form");
</script>
</body>
</html>

请添加图片描述
获取cookie

document.cookie

history

history.back()  //后退
history.forward()  //前进

操作DOM对象

浏览器的网页是一个树形结构

更新：更新dom节点
遍历dom节点：得到dom节点
删除：删除一个dom节点
添加：添加一个新的dom节点

要操作一个dom节点，就必须获得这个dom节点

标签选择器

document.getElementsByTagName()

请添加图片描述

id选择器

document.getElementById(‘p1’)

请添加图片描述

class选择器

document.getElementsByClassName(‘p2’)

请添加图片描述

获得DOM节点

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementsByClassName('father');

var children = father.children;

更新DOM节点

var id1=document.getElementById('id1');

操作文本

id1.innerText = '123';

操作css

id1.style.color = 'red';

删除DOM节点

删除节点步骤：先获取父节点，通过父节点删除自己

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(p1);
</script>

删除多个节点时，children是在时刻变化的。

创建和插入DOM节点

我们获得了某个dom节点，假设这个节点是空的，可以使用innerHTML就可以增加一个元素，但是这个dom节点已经存在元素时，就不能这样操作，否则会产生覆盖。

追加：

<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>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js)  //追加到后面
</script>

请添加图片描述
创建一个新标签，实现插入

var js = document.getElementById('js');
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');

请添加图片描述
insertbefore()

var js = document.getElementById('js');
var ee = document.getElementById('ee');
var list = document.getElementById('list');
list.insertBefore(js,ee);

要包含的节点.insertBefore(newNode,targetNode)

操作表单

获取输入框中的内容：

<form method="post">
      <span>用户名：</span><input type="text" id="username">
    </form>
<script>
    var input_text = document.getElementById('username')
</script>

请添加图片描述
对于单选框和多选框等固定的值，使用.value只能取到当前的值，应该使用.checked查看返回的结果是否为true，为true则被选中。

<form method="post">
      <span>用户名：</span><input type="text" id="username">
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="man">男
        <input type="radio" name="sex" value="women" id="women">女
    </form>
<script>
    var input_text = document.getElementById('username')
    var input_sex = document.getElementsByTagName('input')
    var man = document.getElementById('man')
    var women = document.getElementById('women')

</script>