1. DOM
1.1 改变HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
可用于直接向 HTML 输出流写内容。
document.getElementById("").innerHTML=新的 HTML用于修改变 HTML 元素的内容
语法 语法描述 document.write("") 直接向 HTML 输出流写内容 document.getElementById("id").attribute=新属性值 改变 HTML 元素的属性 document.getElementById("id").innerHTML=新的 HTML 改变 HTML 元素的内容 document.getElementById("id").value 设置或者获取input标签的value值 document.getElementById("id").innerText 设置或者是获取标签中间的内容
1.2 操作样式
语法:节点对象.style.属性名= 属性值
<body>
<p>改变第一个段落p的颜色</p>
<p>第二个p段落</p>
<button onclick="showInfo()">点击改变样式</button>
<script>
function showInfo(){
// [0]表示第一个元素，eg.只改变第一个p的颜色
document.getElementsByTagName("p")[0].style.color="red";
}
</script>
</body>
1.3 绑定事件
1.3.1 直接在标签中绑定
<body>
<p>一个段落</p>
<button onclick="document.getElementsByTagName('p')[0].style.color='red'">点击</button>
</body>
1.3.2 使用函数绑定
1.3.2.1 方式一
<body>
<input type="button" name="" id="tv_btn" value="点击">
<script>
document.getElementById("tv_btn").onclick=function(){
alert("弹一个框");
}
</script>
</body>
1.3.2.2 方式二
<body>
<input type="button" name="" id="" value="点击" onclick="showInfo()">
<script>
function showInfo(){
console.log("点击我!有惊喜");
}
</script>
</body>
1.3.3 使用js提供的方法绑定
| 方法 | 描述 |
|---|---|
| addEventListener() | 用于向指定元素添加事件句柄。允许在目标事件中注册监听事件 |
| removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄。运行一次注册在事件目标上的监听事件 |
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
1.4 创建/删除节点
| 方法 | 描述 |
|---|---|
| document.createElement() | 创建节点对象 |
| document.createTextNode() | 创建文本节点 |
| 节点对象.appendChild() | 添加父子关系 |
| 节点对象.removeChild() | 删除子节点 |
<body>
<input type="button" name="" id="" onclick="addEle()" value="增加"/>
<input type="button" name="" id="" onclick="deleEle()" value="删除第2个段落"/>
<div id="tv_div">
<p>第一个段落p</p>
<p id="tv_p">第2个段落p</p>
<p>第3个段落p</p>
</div>
<script>
function addEle(){
//创建节点
var tv_node = document.createElement("p");
//创建文本节点
var tv_ele = document.createTextNode("新增的段落p");
//添加上下级关系
tv_node.appendChild(tv_ele);
//根据id获取节点对象
var tv_div = document.getElementById("tv_div");
tv_div.appendChild(tv_node);
}
function deleEle() {
//根据id获取节点对象
var tv_p = document.getElementById("tv_p");
//获取父节点
var tv_div = document.getElementById("tv_div");
//根据父节点删除子节点
tv_div.removeChild(tv_p);
}
</script>
1.5 定时函数
| 方法 | 描述 |
|---|---|
| setInterval("执行操作","间隔的时间(毫秒值)") | 间隔多长时间多次执行操作 |
| clearInterval("定时函数") | 清除定时函数 |
| setTimeout("执行操作","间隔的时间") | 间隔多长时间执行一次 |
| clearTimeout("定时函数") | 清除定时函数 |
js 定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
2. BOM
2.1 简介
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
2.2 组成
DOM对象也是BOM对象的一部分
2.3 window
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
2.4 window document
| 属性 | 描述 |
|---|---|
| offsetWidth | 获取标签的宽度 |
| offsetHeight | 获取标签的高度 |
| window.innerHeight | 浏览器窗口的内部高度(包括滚动条) |
| window.innerWidth | 浏览器窗口的内部宽度(包括滚动条) |
2.5 window screen
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
2.6 window location
window.location 对象在编写时可不使用 window 这个前缀。
一些实例:
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档
2.7 window history
window.history对象在编写时可不使用 window 这个前缀。
一些方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
2.8 window navigator
window.navigator 对象在编写时可不使用 window 这个前缀。
navigator.appCodeName 浏览器代号 navigator.appName 浏览器名称 navigator.appVersion 浏览器版本 avigator.cookieEnabled 启用Cookies navigator.platform 硬件平台 navigator.userAgent 用户代理
警告!!!来自 navigator 对象的信息具有误导性.