【前端入门】JavaScript（3）

新手且笨蛋37

已于 2022-07-13 16:01:11 修改

阅读量423

点赞数 1

分类专栏：前端入门文章标签：前端 javascript

于 2022-02-26 21:27:14 首次发布

本文链接：https://blog.csdn.net/weixin_52122251/article/details/123132645

版权

前端入门专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、操作BOM对象

BOM:浏览器对象模型

navigator

封装了浏览器的信息，一般不用，因为可以人为修改

screen

封装了计算机屏幕的信息

location（重要）

代表当前页面的url信息

location.reload()//重新加载页面
location.assign(url);//访问此网站跳转到url所在的网站

document

代表当前的页面

document.title;//网页的title
document.getElementById(id);//通过id获得元素
//类似的还能通过其他东西获得元素
document.cookie;//可以直接获取当前页面的cookie

history

history.back();//后退
history.forword();//前进

二、操作DOM对象（重点）

DOM：文档对象模型
浏览器网页就是一个DOM树形结构

更新：更新DOM节点
遍历：得到DOM节点
删除：删除DOM节点
添加：添加新的DOM节点

要想操作一个DOM节点，就必须先获得这个DOM节点

1、获得DOM节点

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    
    var father = document.getElementById('father');
    var cd = father.children;//获取父节点下的所有子节点
    // father.firstChild;
    // father.lastChild;
</script>

这是原生代码，之后尽量用jQuery

2、更新节点

修改节点内的文本

这个文本可以是纯文本，也可以是超文本。

节点.innerText = '123';//修改文本内容
节点.innerHTML = '<strong>123</strong>';//文本的值可以使用超文本

修改节点内的css样式

节点.style.color = 'red';
节点.style.fontSize = '40px';

原本css的带 ’ - ’ 的字段，都变成驼峰命名。
类似的可以修改的还有很多，只是举了个例子。

3、删除节点

先获取父节点，再删除自己

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //删除p1
    var p1 = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1);
</script>

删除后的结构如下所示，是在控制台查询的结果，可以看到p1没了

HTMLCollection(2) [h1, p.p2]
0: h1
1: p.p2
length: 2
[[Prototype]]: HTMLCollection

需要注意的是，删除多个元素时，父类的children是在动态变化的，需注意下标的变化

4、插入节点

之前通过innerHTML方法添加节点的前提是没有其他节点，这本质是一种覆盖操作，并不是真正意义上的插入。在已经有节点的情况下，不能用这样的方式插入节点。

追加已存在节点

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');

	//追加
    list.append(js);
</script>

所以，原HTML会变为:
在这里插入图片描述

通过js创建新节点

//创建新节点
var newP = document.createElement('p')//创建一个<p></p>
newP.id = 'newP';
newP.innerHTML = 'Hello!';
list.append(newP);

这样最初的html结构就会变为：
在这里插入图片描述
同样，css样式也可以定义，类似于：

newP.style.color = 'red';

页面就会变成：
在这里插入图片描述
这个节点同时可以是一个标签节点，用setAttribute方法为标签设置属性。

//创建一个script标签
var myScript = document.createElement('script');
list.append(myScript);
myScript.setAttribute('type','text/javascript');//setAttribute有两个参数，前一个是标签的key，后一个是标签的值
myScript.setAttribute('src','ms.js');

在这里插入图片描述
当获取了多个标签时，

//body标签
var _body = document.getElementsByTagName('body');
var body = _body[0];
body.style.background = 'yellow';

像类似于getElementsByTagName的方法，获取的是元素集合，对于多个元素，是没法像之前那样操作的！
所以，像body这种标签，我们确定它是唯一的时，可以通过下标0取出来
真正的body标签是这里的_body[0]，而不是_body 。

向前插入节点

方法名是insertBefore引用对象是一个节点，在这个节点内部进行操作。参数是两个，前一个参数（代表的节点）插入到后一个参数（代表的节点）之前。举个例子：

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    var se = document.getElementById('se');
    var css = document.createElement('p');
    var list = document.getElementById('list');
    css.id = 'css';
    css.innerHTML = 'css3'
    list.insertBefore(css,se);//list节点内，css节点插到se节点之前
</script>

在这里插入图片描述

替换节点

replaceChild和向前插入用法一样。引用对象是一个节点，在这个节点内部进行操作。参数是两个，前一个参数（代表的节点）替换后一个参数（代表的节点）。

三、操作表单（验证）

表单是form，也是DOM树的一个部分。

简单回忆一下，表单有哪些组件：

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

表单的目的是提交信息，所以操作表单的意义就是获取信息，加以处理。
操作类似但不限于：

<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
</form>

<script>
    var username = document.getElementById('username');
    username.value; //获取值
</script>

提交表单

md5加密网址：
https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

表单在提交时用onsubmit=" "执行函数
按钮点击时，用onclick=" "执行函数

举个简单的例子：

<form action="https://www.baidu.com" method="post" onsubmit="return _click()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="un">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="pwd" name="pwd">
    </p>
    <!--绑定事件-->
    <button type="submit" onclick="_click()">提交</button>
</form>

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
    function _click(){
        var un = document.getElementById('username');
        var pwd = document.getElementById('pwd');
        pwd.value = md5(pwd.value);
        return false;
    }
</script>

这个会提交失败，因为 onsubmit="return _click()" ，_click()函数返回的是false。

新手且笨蛋37

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端入门】JavaScript（3）

一、操作BOM对象BOM:浏览器对象模型navigator封装了浏览器的信息，一般不用，因为可以认为修改screen封装了计算机屏幕的信息location（重要）代表当前页面的url信息location.reload()//重新加载页面location.assign(url);//访问此网站跳转到url所在的网站document代表当前的页面document.title;//网页的titledocument.getElementById(id);//通过id获得元
复制链接

扫一扫