JavaScript基础三
一、BOM
1、windows对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
一些常用的Window方法：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
2.windows子对象
navigator对象
//web浏览器全程
navigator.appCodeName;
"Mozilla"
// Web浏览器厂商和版本的详细字符串
navigator.appVersion;
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"
// 客户端绝大部分信息
navigator.userAgent;
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36"
// 浏览器运行所在的操作系统
navigator.platform;
"Win32"
screen对象
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
history对象
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
// 前进一页
history.forward();
// 后退一页
history.back();
location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
// 获取当前url
location.href;
// 跳转到指定页面
location.href="https://www.google.com.hk";
// 重新加载页面
location.reload();
3.弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框
//警告框
alert('哈哈');
确认框
确认则返回true，取消返回False
// 确认框
confirm("是否需要进行QQ登陆");
提示框
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
// 提示框
prompt("1+1=?","请输入答案");
4.计时相关
setTimeout('JS语句',毫秒) 过了X毫米之后执行JS语句
setInterval('JS语句',毫秒) 每隔X毫秒执行JS语句
两个方法都会返回任务的ID值
clearTimeout(ID值) 取消setTimeout() 方法的任务
clearInterval(ID值) 取消clearInterval() 方法的任务
两个方法的都需要填入相应的ID值才能取消任务
//10000毫秒后执行函数
setTimeout(function(){console.log(111)},10000)
//返回任务ID
42
//取消计时任务
clearTimeout(42)
//每个2000毫秒执行一次函数
setInterval(function(){console.log(123)},2000);
//返回任务ID
43
//取消定时任务
clearInterval(43);
二、DOM
DOM 是一套对文档的内容进行抽象和概念化的方法
通过JavaScript操作HTML文档，操作HTML的元素
将HTML映射成用代码去描述HTML页面，把HTML的元素当成节点来处理
1、查找标签
//根据ID获取标签
document.getElementById('i1');
//根据class属性获取
document.getElementsByClassName('.jumbotron');
//根据标签名获取标签合计
document.getElementsByTagName('div');
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
2、节点操作
创建节点：createElement(标签名)
添加节点：
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
//定义变量找到标签，返回是一个数组
var divEle = document.getElementsByClassName('d1');
//创建标签
var aEle = document.createElement('a');
// 查看divEle变量的内容，是一个数组
divEle
HTMLCollection [div.d1]
//查看创建的标签
aEle
<a></a>
// 给div的追加一个子节点
divEle[0].appendChild(aEle);
<a></a>
//创建标签
var pEle = document.createElement('p');
//查找标签，返回数组
var aEle = document.getElementsByTagName('a');
//插入标签
divEle[0].insertBefore(pEle,aEle[0]);
删除节点
somenode.removeChild(要删除的节点)
//删除节点
divEle[0].removeChild(aEle[0]);
替换节点
//替换节点
somenode.replaceChild(newnode, 某个节点);
3、获取节点文本的值
innerText 不认识html标签，获取该标签和内部标签的所有文本内容
//查找标签
var divEle = document.getElementsByTagName('div');
// 获取节点的值
divEle[0].innerText
innerHTML 认识html标签，获取文本内容和子标签及内容
//查找标签
var divEle = document.getElementsByTagName('div');
// 获取节点的值（含标签）
divEle[0].innerHTML;
4、设置文本的值
// 查找标签
var h1Ele = document.getElementsByTagName('h1');
// 修改标签的文本内容（标签当作字符串）
h1Ele[0].innerText='<a>abc</a>';
// 修改标签的内容（标签仍为标签）
h1Ele[0].innerHTML='<a>abc</a>';
5、attribute操作，修改属性
// 设置标签的属性
h1Ele[0].setAttribute('k','v');
// 查看标签的属性
h1Ele[0].getAttribute('k');
// 删除标签的属性
h1Ele[0].removeAttribute('k');
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."
6、获取值操作
获取用户输入的值
适用于以下标签：
input
select
textarea
// 查找标签
var selEle = document.getElementById('s1');
//获取option的被用户选中的value属性，如果没有value属性则获取文本内容
selEle.value
// 查找标签
var inEle = document.getElementById('i1');
// 获取用户输入的内容
inEle.value
//查找标签
var texEle = document.getElementById('t1');
// 获取用户输入的内容
texEle.value
7、class操作
classList.remove(cls) //删除指定类
classList.add(cls) //添加类
classList.contains(cls) //存在返回true，否则返回false
classList.toggle(cls) //存在就删除，否则添加
8、指定CSS操作
JS操作CSS属性的规律：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
三、事件
1.常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
2.绑定方式：
方式一：
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。
方式二：
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
