一、操作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>//删除p1var 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。

【前端入门】JavaScript（3）相关推荐

前端入门——JavaScript
JavaScript入门学习 1.快速入门 1.1.引入JavaScript 1.2.变量 1.3.调试 1.4.数据类型 1.5.严格检查模式 2.数据类型 2.1.字符串 2.2.数组 2.3.对 ...
前端入门--JavaScript篇
JavaScript基础文章目录 JavaScript基础 JavaScript是什么 JavaScript的使用方式 JavaScript的运行过程 JS的语法三种语言的注释输入输出 JS中的 ...
前端入门前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
零基础前端入门，真正难在哪里？简说编程思想和逻辑思维
很多同学跟我说,学前端学的很迷茫, 就这样,问他为啥迷茫吧,说也说不出来啥具体的.就是也学了一堆东西,也确实都是前端开发工作当中要用的.但依然不知道前路如何. 这里就有一个"前端入门的标准& ...
码匠编程：零基础从前端入门到前端开发工程师路线
一.前端学习路径规划下面是一个学习线路图,其实还有很多的技术导图中没有涉及到,对于初学者来说,能够掌握上边的知识点已经很不错了. 零基础从前端入门到前端开发工程师路线二.入坑前的三问想要入前端的 ...
web前端入门指南：来看看这位大佬的学习之路吧！
开始他的表演第一章:为什么要学习前端开发?web前端开发是什么? 从事前端开发工作差不多3年了,自己也从一个什么都不懂的小白积累了一定的理论和实践经验.编写<Web前端入门指南>系列文章 ...
经验分享：Web前端入门要怎么开始学？
现在,几乎整个互联网行业都缺前端工程师,不仅是刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在. 据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下,Web前端开 ...
【熬夜猛肝万字博文】学妹问我怎么入门 Javascript，百般盘问下我终于决定贡献出自己的 JavaScript入门笔记(三)
你好,我是阿ken?? 版权声明:本文为CSDN博主「」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 另外,博文中某些图片或内容可能出自网络,如有侵权或问题,请及 ...
【黑马程序员pink老师前端】JavaScript对象
java 学习笔记指路基础知识 Python转java补充知识 Java中常见的名词解释前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
什么是前端？前端入门需要学习哪些技术？前端找工作需要具备什么样的条件？
一.web前端是什么简单的来说就是,我们使用的APP.网站.小程序中所有可以直接看到的东西.比如:淘宝首页,中间部分的天猫新品.充值中心.右下角我的淘宝,这些按钮都属于前端.那点一下按钮,跳到另一 ...

【前端入门】JavaScript（3）