js基础用法下，dom对象，表单

最新推荐文章于 2024-07-11 20:55:36 发布

一方1

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量218

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67737085/article/details/127530241

版权

22.面向对象的编程，继承，class

22.1什么是面向对象

JavaScript，java，c#。。。面向对象；JavaScript有些区别！

类：模板

对象：具体的实例

在JavaScript这个需要换一下思维方式。

22.2继承

let students = {
    name:"qingjiang",
    age:3,
    run:function () {
        console.log(this.name+"  run...")
    }
}
let xiaoming = {
    name:"xiaoming"
}
xiaoming.__proto__=students     //继承
console.log(xiaoming.run())
console.log(xiaoming.age)
console.log(xiaoming)

console.log(xiaoming)：

[[Prototype]]: Object
1. age: 3
2. name: “qingjiang”
3. run: ƒ ()
4. 1. arguments: null
  2. caller: null
  3. length: 0
  4. name: “run”

22.3class继承

定义一个类：属性，方法

原型对象

//定义一个学上类
class students{
    constructor() {
        this.name=name;
    }

    hello(){
        alert("hello")
    }
}
let xiaoming=new students("xiaoming")
let xiaohong=new students("xiaohong")
console.log(xiaoming.hello())

继承********

<meta charset="UTF-8">
<title>Title</title>
<script>
    class students{
        constructor() {
            this.name=name;
        }

        hello(){
            alert("hello")
        }
    }
    class xiaostudents extends students{     //继承了students
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }
        mygrade(){
            alert("我是一个小学生")
        }
    }
    
    let xiaoming=new students("xiaoming")
    let xiaohong=new students("xiaohong")
    console.log(xiaoming.hello())

原型链

proto

23.操作bom对象（重点）

23.1浏览器的介绍

JavaScript的诞生就是为了让他在浏览器中运行。

BOM：浏览器对象模型。

IE
Chrome
Safari
FireFox

三方

QQ浏览器
360浏览器

23.2window代表浏览器窗口

undefined
window.innerHeight
388
window.innerWidth
770
window.outerHeight
824
window.outerWidth
784
//调试浏览器窗口

23.3 navigator

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36'
navigator.platform
'Win32'

大多数不会使用 navigator这个对象，因为会被人为修改。

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

23.4 screen

screen.width
1536 px
screen.height
864  px

代表屏幕尺寸。

23.5*location

location代表当前页面的URL信息

host**: "www.baidu.com"     //主机

**href**: "https://www.baidu.com/?tn=49055317_3_hao_pg"        //跳转网页

**protocol**: "https:"        ///协议

**reload**: *ƒ reload()*       //方法，重新加载，刷新网页
    //设置新的地址
    location.assijn("网址");

23.6*document

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

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

获取具体的文档数节点

<dl id="p1">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    let a1 = document.getElementById('p1')
</script>

结果：
请添加图片描述

获取cookie

document.cookie

劫持cookie的原理

<script src="aa.js"></script>
//恶意人员：获取你的cookie上传到他的服务器

服务器端可以设置cookie：httpOnly

23.7 *history（不建议使用）

history代表浏览器的历史纪录

history.back（）//前进

history.forward（）//后退

24.操作DOM对象（重要）

DOM；文档对象。

核心

浏览器网页就是一个Dom树形结构。

1.更新Dom节点

2.遍历Dom节点

3.删除Dom节点

4.添加Dom节点

要操作一个Dom节点，首先要获得Dom节点

<div id="father">
    <h1 class="h1">biaoti1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css选择器
    let h1= document.getElementById('h1')
    let p1=document.getElementById('p1')
    let p2=document.getElementById('p2')
    let father=document.getElementById('father')
    //father.firstChild
    //father.lastChild

    let children = father.children;   //获取父节点下所有子节点。

这是原生代码，之后我们尽量使用jQuery()

24.1DOM更新节点

id1.innerText='456'    修改文本的值

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

id.style.color='red'                 操作CSS

24.2DOM删除节点

步骤：

1.先获取父节点，然后通过父节点删除自己。

father.removeChild(p1)

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

24.3DOM插入节点

我们获得一个DOM节点，如果这个DOM节点是空的，我们就可以通过，innerHTML就可以增加一个元素。但是这个DOM节点已经存在元素，我们便不能这么做了。因为会产生覆盖。

追加：已存在节点

<p id="js">javaScript</p>
<div id="list">
    <p id="se">Javase</p>
    <p id="ee">Javaee</p>
    <p id="va">Java</p>
</div>
<script>
    let js=document.getElementById('js')
    let list= document.getElementById('list')
    
    list.appendChild(js);   //追加到后面，已存在节点。
</script>

请添加图片描述

插入，创建节点。

<p id="js">javaScript</p>
<div id="list">
    <p id="se">Javase</p>
    <p id="ee">Javaee</p>
    <p id="va">Java</p>
</div>
<script>
    let js=document.getElementById('js')
    let list= document.getElementById('list')
![请添加图片描述](https://img-blog.csdnimg.cn/231719a84f4a4e96a4782f15fad1c432.png)

    list.appendChild(js);   //追加到后面，已存在节点。
    let newP=document.createElement('p')
    newP.id='newP';
    newP.innerText='HelloWorld'
    list.appendChild(newP)   //插入新建的节点。

结果：
请添加图片描述
*万能创建节点，可以设置任意值。

let my = document.createElement('p')
 my.setAttribute('id','my')

24.5insert插入到前面

先获取了父节点。

<p id="js">javaScript</p>
<div id="list">
    <p id="se">Javase</p>
    <p id="ee">Javaee</p>
    <p id="va">Java</p>
</div>
<script>
    let a1 = document.getElementById('va');
    let a2 = document.getElementById('js');
    let a3 = document.getElementById('list');
    list.insertBefore(js,a1)

25.表单

表单是什么 form DOM树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password

表单的目的：提交信息。

<form action="post">
    <p>
        <span>用户名:</span><input type="text" title="sss" id="username">
    </p>
<!--    多选框的值value是定义好的-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="nan" id="p1">男
        <input type="radio" name="sex" value="nv" id="p2">女
    </p>
</form>
<script>
    //得到输入框的值
    let user= document.getElementById('username')
    //修改输入框的值
    user.value = 'aaaa'
    let sex_boy =document.getElementById('p1')
    alert(sex_boy.value)
     let x=sex_boy.checked; //判断是否被选中
    alert(x)
</script>