Java-day22学习笔记-CSDN博客

本文链接：https://blog.csdn.net/ChangeNone/article/details/113264334

day21复习

在这里插入图片描述

Java-day22学习笔记

一、BOM

1.1 Navigator对象属性

appCodeName			返回浏览器的代码名
appName				返回浏览器的名称
appVersion			返回浏览器的平台和版本信息
platform			返回运行浏览器的操作系统平台
userAgent			返回由客户机发送服务器的 user-agent 头部的值

1.2 Screen对象属性

width				返回显示器屏幕的宽度
height				返回显示器屏幕的高度

1.3 Location对象属性

host				设置或返回主机名和当前 URL 的端口号
port				设置或返回当前 URL 的端口号
href				设置或返回完整的 URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-Navigator对象</title>

</head>
<body>

</body>
</html>

<script>

    console.log(navigator.appName);
    console.log(navigator.appVersion);
    console.log(navigator.appCodeName);
    console.log(navigator.platform);
    console.log(navigator.userAgent);
    console.log("------------");

    console.log(screen.width);
    console.log(screen.height);
    console.log("------------");

    console.log(location.host);
    console.log(location.port);
    console.log(location.href);

    // location.href="https://www.baidu.com";

</script>

二、DOM

DOM：Document Object Model 文档对象模型。dom是js提供的，用来访问网页上所有的元素（标签、属性、文本）

浏览器在加载的时候，会将网页的内容会生成一个dom对象，这个dom对象是一个树的形状，它将内容按照不同的类型分成了如下几类：

整个网页封装成了Document对象
标签封装成了Element对象
属性封装成了Attribute对象
文本封装成了Text对象

2.1 获取网页元素的方法

getElementById()			返回对拥有指定 id 的第一个对象的引用
getElementsByName()			返回带有指定名称的对象集合 【返回值为数组】
getElementsByTagName()		返回带有指定标签名的对象集合

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

</head>
<body>

<p id="bt">背影</p>
<input type="text" id="txt" name="username"> <br>
<input type="text" id="txt2" name="username"> <br>
<input type="button" id="btn" name="password">

</body>
</html>

<script>

    var elementById = document.getElementById("bt");
    console.log(elementById);

    var txt = document.getElementById("txt");
    console.log(txt);

    var btn = document.getElementById("btn");
    console.log(btn);
    console.log("--------------------------");

    var elementsByName = document.getElementsByName("username");
    console.log(elementsByName[2]);
    console.log("--------------------------");

    var elementsByTagName = document.getElementsByTagName("input");
    console.log(elementsByTagName);
    console.log(elementsByTagName[0]);

</script>

2.2 对网页中的标签进行操作

innerHTML
功能：获取文本的内容

innerHTML=内容;
功能：
	1. 对相应的标签设置文本内容（可以带样式）
	2. 会将之前的内容给覆盖掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-对网页中的标签进行操作</title>
</head>
<body>

<span>Hello World！</span>

<!--<input type="text" id="txt" value="haha">-->

</body>
</html>

<script>

    var spans = document.getElementsByTagName("span");
    console.log(spans[0].innerHTML);

    spans[0].innerHTML="hello <font size='7' color='red'>js</font>！";

    // var txt = document.getElementById("txt");
    // console.log(txt.innerHTML);

</script>

2.3 对网页中的标签属性进行操作

getAttribute()		返回元素节点的指定属性值 【指定属性的属性值】
setAttribute()		把指定属性设置或更改为指定值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-对网页中的标签属性进行操作</title>
</head>
<body>

<input type="text" id="txt" value="haha">

</body>
</html>

<script>

    var txt = document.getElementById("txt");
    console.log(txt.getAttribute("value"));

    txt.setAttribute("value", "hehe");
    console.log(txt.getAttribute("value"));

</script>

练习：
	1. 写一个文本输入框和一个普通按钮
	2. 点击按钮可以实现显示或隐藏密码（按着按钮是显示密码，松开按钮是加密密码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-练习</title>
</head>
<body>

<input type="password" id="pwd"> <br>
<input type="button" id="btn" value="按钮" onmousedown="showPassword()" onmouseup="hidePassword()">

</body>
</html>

<script>

    function showPassword() {

        document.getElementById("pwd").setAttribute("type", "text");
    }

    function hidePassword() {

        document.getElementById("pwd").setAttribute("type", "password");
    }

</script>

练习2：
轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-轮播图</title>

    <script>

        var count = 0;

        //2. 更换图片的方法
        function changePic() {

            //获取img对象
            var pic = document.getElementById("pic");

            //通过img对象的src属性给src赋新值
            pic.src = "../img/pic" + (++count) + ".jpg";

            //如果count>3，那么就将count重置为1
            if(count == 3){
                count = 0;
            }
        }

    </script>

</head>

<!--1. 页面加载的时候就执行定时器开始每隔2秒调用一下更换图片的方法-->
<body onload="setInterval('changePic()', 2000)">

<img src="../img/pic1.jpg" id="pic">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-轮播图</title>

    <script>

        var count = 0;

        function changePic() {

            var pic = document.getElementById("pic");
            pic.setAttribute("src", "../img/pic" + (++count) + ".jpg");

            if(count == 3){
                count = 0;
            }

        }

    </script>

</head>
<body onload="setInterval('changePic()', 2000)">

<img src="../img/pic1.jpg" id="pic">

</body>
</html>