bom和dom。获取网页元素:ID、class、标签、选择器-改元素内容-事件:页面加载、点击、鼠标、键盘、焦点、表单提交-操作元素及属性（增删改查）

最新推荐文章于 2023-08-01 23:53:41 发布

Tony-1fan

最新推荐文章于 2023-08-01 23:53:41 发布

阅读量303

点赞数

分类专栏：前端文章标签： js css javascript html

本文链接：https://blog.csdn.net/qq_39497997/article/details/113029534

版权

1 Bom(browser object model)

在浏览器中，window指的就是bom对象

<script>
    window.alert("hello");
</script>

重定向（跳转到指定网站）

<script>
    // 重定向
    window.location.href = "http://www.baidu.com";
</script>

浏览器可视区

	// 浏览器可视区
    console.log(innerHeight);
    console.log(innerWidth);

当前窗口

	// 当前窗口
    console.log(outerHeight);
    console.log(outerWidth);

2 Dom（document object model）

document object model（文档对象模型）

window.document: 通过这种方式来获取文档对象

但是我们的编程是面向浏览器编程,而浏览器对于我们编程来说就是window对象;

所以说在实际开发过程中window是可以省略的;

document

3 输出内容到页面

<script>
    document.write("hello world");
</script>

4 js获取网页中的元素

4.1根据ID获取网页中的元素

根据ID获取网页中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取网页中的元素</title>
</head>
<body>
<div>
    <p id="p1">我在学习java大数据</p>
</div>
<span>Java大数据还是有点难度</span>
<hr>

<button onclick="doClick()">你点我呀</button>

<script>
    function doClick() {
    
        //根据ID获取网页元素
        let p1Element = document.getElementById("p1");
        p1Element.innerText = "我在学习云计算"
    }
</script>
</body>
</html>

4.2 根据class获取网页中的元素

根据class名称获取元素,返回的是一个集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取网页中的元素</title>
</head>
<body>

<div>
    <p id="p1" class="c1">我在学习java大数据</p>
</div>
<span class="c1">Java大数据还是有点难度</span>
<hr>

<button onclick="doClick()">你点我呀</button>

<script>
    function doClick() {
    
        let c1Elements = document.getElementsByClassName("c1");
        for (index in c1Elements) {
    
            const c1Element = c1Elements[index];
            c1Element.innerText="java云计算";
        }
    }
</script>
</body>
</html>

4.3 根据标签获取网页中的元素

根据标签获取元素,返回的是一个集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取网页中的元素</title>
</head>
<body>

<div>
    <p id="p1" class="c1">我在学习java大数据</p>
</div>
<span class="c1">Java大数据还是有点难度</span>
<hr>

<p>前端学习</p>
<button onclick="doClick()">你点我呀</button>

<script>
    function doClick() {
    
        let ps = document.getElementsByTagName("p")
        for (let psKey in ps) {<

最低0.47元/天解锁文章

Tony-1fan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bom和dom。获取网页元素:ID、class、标签、选择器-改元素内容-事件:页面加载、点击、鼠标、键盘、焦点、表单提交-操作元素及属性（增删改查）

bom和dom。获取网页元素:ID、class、标签、选择器-改元素内容-事件:页面加载、点击、鼠标、键盘、焦点、表单提交-操作元素及属性（增删改查）
复制链接

扫一扫