javascript-210424-01_当页面加载时,页面上的四个div分别显示红黄蓝绿,其中div01使用getelementbyid()-优快云博客

本文详细介绍了JavaScript中的BOM（浏览器对象模型）和DOM（文档对象模型）操作，包括window、navigator、screen、location、document等对象的使用，以及如何获取和操作页面元素、文本和样式。此外，还探讨了表单操作和jQuery的基本用法，如事件处理、DOM操作简化。通过示例代码展示了如何添加、删除和修改节点，以及如何利用jQuery进行高效地DOM操作。

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

javascript - 210424 - 01

操作BOM
操作DOM
表单操作
jQuery

操作BOM

BOM : 浏览器对象模型
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

Window

window 代表浏览器窗口

window.alert('nihaoya')
undefined

window.innerHeight
204

window.innerWidth
1325

window.outerHeight
838

window.outerWidth
1550

// 上面是当前页面的值，如果调整窗口大小，值会改变

Navigator

Navigator 封装了浏览器信息

navigator.appName
"Netscape"

navigator.appVersion
"5.0 (Windows)"

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:86.0) Gecko/20100101 Firefox/86.0"

navigator.platform
"Win32"

navigator这个会被人为修改，所以不使用

所以不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536

screen.height
864

// px

location***

location 代表当前页面URL的信息

hash: ""

host: "www.baidu.com"

hostname: "www.baidu.com"

href: "https://www.baidu.com/"

origin: "https://www.baidu.com"

pathname: "/"

port: ""

protocol: "https:"

// 刷新网页
reload: reload()

// 设置新的地址  它会跳转到bilibili
location.assign('https://www.bilibili.com/')

document

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

document.title
"百度一下，你就知道"

document.title='bgy'
"bgy"

获取具体的文档树节点

<body>
<dl id="water">
    <dt>可乐</dt>
    <dd>雪碧</dd>
    <dd>冰红茶</dd>
</dl>

<script>
    var dl = document.getElementById('water');
    console.log(dl);
</script>
</body>

获取cookie

document.cookie
""

劫持Cookie，，，之后再了解

原理：

<script src="****.js"></script>

恶意插入一段JavaScript代码，获取用户cookie上传到他的服务器

解决劫持cookie：服务器端可以设置cookie：httpOnly

history

history 代表浏览器的历史记录

// 后退
history.back();

// 前进
history.forward();

相当于：

操作DOM

通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。
HTML DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
    JavaScript 能改变页面中的所有 HTML 元素
    JavaScript 能改变页面中的所有 HTML 属性
    JavaScript 能改变页面中的所有 CSS 样式
    JavaScript 能删除已有的 HTML 元素和属性
    JavaScript 能添加新的 HTML 元素和属性
    JavaScript 能对页面中所有已有的 HTML 事件作出反应
    JavaScript 能在页面中创建新的 HTML 事件

参考w3school教程：https://www.w3school.com.cn/js/js_htmldom.asp

浏览器网页就是一个DOM树形结构
	更新		节点
	遍历		节点
	删除		节点
	添加		节点

获取节点

这是原生代码，之后jQuery更方便

<body>

    <h2>标题一</h2>
    <p id="p01_bgy">p01_bgy</p>
    <p class="p02_bgy">p02_bgy</p>

    <hr/>

    <div id="father">
        <ul id="ul01_bgy">
            <li id="ul01_bgy_li01">淘宝</li>
            <li id="ul01_bgy_li02">京东</li>
            <li id="ul01_bgy_li03">唯品会</li>
        </ul>

        <h3>标题三</h3>
        <p id="p03_bgy">p03_bgy</p>
    </div>

    <script>
        // 对应着CSS选择器
        var h2 = document.getElementsByTagName('h2');
        var p01_bgy = document.getElementById('p01_bgy');
        var p02_bgy = document.getElementsByClassName('p02_bgy');

        // 获得父节点
        var father = document.getElementById('father');
        // 获得父节点下的所有子节点
        var childrens = father.children;
        // 获取第一个子节点
        var firstNode = father.firstChild;
        // 获取最后一个子节点
        var lastNode = father.lastChild;
    </script>
</body>

操作文本

<body>

    <div id="div01_bgy"></div>
    <hr/>
    <p id="p01_bgy"></p>
    <p id="p02_bgy">白光一</p>

    <script>
        var div01_bgy = document.getElementById('div01_bgy');
        // 修改文本值
        div01_bgy.innerText = 'div01_bgy';

        var p01_bgy = document.getElementById('p01_bgy');
        // innerHTML  可以解析HTML文本标签
        p01_bgy.innerHTML = '<strong>p01_bgy</strong>';

        var p02_bgy = document.getElementById('p02_bgy');
        // 得到内容
        console.log(p02_bgy.innerText);
    </script>

</body>

	innerText
	innerHTML


// 修改文本值
div01_bgy.innerText = 'div01_bgy';

// 得到内容
console.log(p02_bgy.innerText);

// innerHTML  可以解析HTML文本标签
p01_bgy.innerHTML = '<strong>p01_bgy</strong>';

操作js

div01_bgy.style.color='red'

div01_bgy.style.fontSize = '15px'

div01_bgy.style.padding = '2em'

删除节点

删除节点，，首先要先获取父节点，，在通过父节点删除自己

<body>
    <div id="father">
        <p id="p01">p01</p>
        <p id="p02">p02</p>
        <p id="p03">p03</p>
        <p id="p04">p04</p>
        <p id="p05">p05</p>
        <p id="p06">p06</p>
        <p id="p07">p07</p>
    </div>

    <script>
        // 获取p01节点
        var p01 = document.getElementById("p01");
        // 获取p01的父节点
        var father = p01.parentElement;
        // 通过父节点删除p01
        father.removeChild(p01);

        /* 
            删除是个动态过程
            删除的多个节点的时候，children是在变化的，注意！！！！
         */
        father.removeChild(father.children[0]);
        father.removeChild(father.children[0]);
        father.removeChild(father.children[2]);
    </script>
</body>

插入节点

获得某个DOM节点后，
如果这个DOM节点为空，，，通过innerHTML就可以增加一个元素，，
如果这个DOM节点不为空，，通过innerHTML增加元素会覆盖

所以我们要用，，，追加

<body>

    <p id="p04">p04</p>
    <div id="list">
        <p id="p01">p01</p>
        <p id="p02">p02</p>
        <p id="p03">p03</p>
    </div>

    <script>
        // 获取已存在的节点
        var p04 = document.getElementById('p04');
        var list = document.getElementById('list');


        // 创建一个p标签
        var newP04 = document.createElement('p');
        // 给 newP04 附一个id
        newP04.id = 'newP04';
        // 给 newP04 附一个值
        newP04.innerText = 'newP04';
        // 在list后面追加newP04
        list.appendChild(newP04);

        var newP05 = document.createElement('p');
        newP05.setAttribute('id','newP05');
        newP05.innerText = 'newP05';
        list.appendChild(newP05);


        // 也可以创建其他标签
        var newScript = document.createElement('script');
        newScript.setAttribute('type','text/javascript');
        document.getElementsByTagName('head')[0].appendChild(newScript);


        var newStyle = document.createElement('style');
        newStyle.setAttribute('type','text/css');
        newStyle.innerHTML = 'body{background-color:red;}';
        document.getElementsByTagName('head')[0].appendChild(newStyle);

        // 也可以向前插入节点
        var newP06 = document.createElement('p');
        newP06.setAttribute('id','newP06');
        newP06.innerText = 'newP06';
        var p02 = document.getElementById('p02');
        // insertBefore(new,old)    在old(已存在)前面插入new(新的)节点
        list.insertBefore(newP06,p02);

    </script>
</body>

表单操作

去了解 有时间   MD5  算法
提交表单  MD5算法，密码加密，，对表单的优化

jQuery

微软jquery压缩版引用地址: 
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

可以到这个网站下载：https://www.jq22.com/jquery-info122

w3school教程链接地址：https://www.w3school.com.cn/jquery/index.asp

jQuery使用格式

${selector}.action()

jquery_Demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!--    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>-->
    <script src="../lib/jquery-3.3.1.js"></script>
    <meta charset="UTF-8">
    <title>jquery_Demo01</title>

</head>
<body>

    <a href="" id="testjquery">你点我一下</a>

    <script type="text/javascript">

        /*
            公式：${selector}.action()
            选择器就是css中选择器
            
            原生JS：
                标签选择器：
                    document.getElementsByTagName()
                id选择器（#）：
                    document.getElementById()
                类选择器（.）：
                    document.getElementsByClassName()
            
            jQuery中：
                $('p').click();
                $('#id').click();
                $('.class').click;
         */
        $('#testjquery').click(function(){
            alert('hhhhh!!!!')
        });
        
    </script>
</body>
</html>

事件

鼠标事件，键盘事件，其他事件

jquery_Demo02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_Demo02</title>
    <script type="text/javascript" src="../lib/jquery-3.5.1.js"></script>
</head>
<body>

    // 获取鼠标当前的一个坐标
    mouse:<span id="mouseMove"></span>

    <div id="divMove" style="border: aqua solid 2px ; width:500px ; height: 500px ; ">
        鼠标在这个区域移动一下
    </div>

    <script>
        // 当网页元素加载完毕后，响应事件
        $(function (){
            $('#divMove').mousemove(function (e){
                $('#mouseMove').text('x:'+e.pageX + ',y:'+e.pageY)
            })
        });
    </script>

</body>
</html>

jquery_Demo03.htm

$('#test-ul li[name=java]').text();					// 得到值

$('#test-ul li[name=java]').text('Java01');			 // 赋值

$('.js').html();								   // 得到值

$('.js').html("JS");							   // 赋值

$('#test-ul li[name=java]').css('color','red');		 // 操作css

$('#test-ul li[name=python]').hide();				// 相当于  display:none;
$('#test-ul li[name=html]').show();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery_Demo03</title>
    <script src="../lib/jquery-3.3.1.js"></script>
</head>
<body>

    <!--
        操作DOM
    -->

    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="java">Java</li>
        <li name="python">Python</li>
        <li name="html">Html5</li>
    </ul>

    <script>
        /* 
        	$('#test-ul').text();
        	$('#test-ul').html();
        	
        	就相当于：
        		innerHTML
        		innerText
        */ 
    </script>
</body>
</html>