对象与表单

最新推荐文章于 2025-12-03 13:04:04 发布

原创最新推荐文章于 2025-12-03 13:04:04 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

文章展示了JavaScript中的面向对象编程概念，特别是类的继承，以及如何通过BOM（浏览器对象模型）来操作浏览器窗口和获取浏览器信息。同时，文中还涵盖了动态创建HTML元素和修改文档结构的内容，以及HTML表单的基本交互操作。

6.面向对象编程

6.1Javascript、Java、c#

继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script >
class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}
var xiaoming=new Student('xiaoming');
//继承
class pupilStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }
    myGrade(){
        alert('我是一名小学生');
    }
}
var xiaohong=new pupilStudent('xiaohong',1);





</script>
</body>
</html>

BOM浏览器操作模型

浏览器窗口的设置

Navigator封装了浏览器的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="p5">p1</p>
<hr>
<div id="ca">

    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>

<script>
    var p1=document.getElementById('p1');
    var ca=document.getElementById('ca');
//通过JS 创建一个新的节点
    var newp=document.createElement('P');//创建一个P标签
    newp.id='newp';
    newp.innerText='牛逼';
    ca.appendChild(newp);

</script>




</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<p id="p5">p1</p>
<hr>
<div id="ca">

    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>

<script>
    var p1=document.getElementById('p1');
    var ca=document.getElementById('ca');
//通过JS 创建一个新的节点
    var newp=document.createElement('P');//创建一个P标签
    newp.id='newp1';
    newp.innerText='牛逼';
    ca.appendChild(newp);

    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript');


   // var body=document.getElementsByTagName('body');
   //   body[0].setAttribute('style','background-color:red')//有效

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




</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p>
        <span>用户名:</span><input type="text" id="username">
    </p>
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>

    
</form>
<script>
    var user_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');
    //得到输入框的值  user_text.value

    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值

//boy_radio.checked//查看返回的结果，是否为true，如果为true则被选中。

</script>

</body>
</html>