一、BOM
1.BOM概念
BOM,即浏览器对象模型,BOM提供了独立于内容的对象结构,可以与浏览器窗口进行互动
2.window对象
窗口对象包括了3个对象:
history:历史记录
document:文档
location:定位
3.history对象
history主要用于控制页面的历史纪录的显示
back():页面展示前一个历史记录
<a href="javascript: history.back()">返回</a>
forward():页面展示后一个历史记录
<a href="javascript: history.forward()">前进</a>
go():根据给定数量现实历史记录,如果是正数,则使用前面的历史记录,如果是负数,则使用后面的历史记录
<a href="javascript: history.go(-1)">返回</a>
<a href="page3.html">下一页</a>
<a href="javascript: history.go(1)">前进</a>
4.location对象
location对象主要用于获取以及更改浏览器地址栏信息。
属性
- host:设置或返回主机名和当前URL的端口号
- hostname:设置或返回当前URL的主机名
- href:设置或返回完整的URL
函数
- reload():重新加载当前文档
- replace():用新的文档替换当前文档
<!--javascript:void(0)表示点击超链接时不做任何事情-->
<a href="javascript:void(0)" onclick="showAddress()">显示地址栏信息</a>
<a href="javascript:void(0)" onclick="refresh()">刷新页面</a>
<a href="javascript:void(0)" onclick="changePage()">替换新页面</a>
function showAddress() {
console.log(location.host);
console.log(location.hostname);
console.log(location.href);
}
function refresh() {
location.reload();
}
function changePage() {
location.replace("page2.html");
}
5.document对象
document对象主要用于操作页面元素
- getElementById():获取给定ID值的元素
- getElementByName():获取给定名称的元素的集合
- getElementByClassName():获取给定类名的元素的集合
- getElementByTagName():获取给定标签名的元素的集合
<body>
<div id="a">a</div>
<div id="b" class="c">b</div>
<div class="c">c</div>
<div name="d">d</div>
</body>
<script type="text/javascript">
let div = document.getElementById("a"); //得到单个元素
console.log(div)
// div.innerText = "将内容改变为b"; //内部文本内容
// div.innerHTML = "<h1>内容支持标签</h1>"; //内部HTML内容
div.textContent = "<h1>文本内容</h1>"; //作用与innerText一样
console.log("============================")
//通过标签名获取元素
let divArr = document.getElementsByTagName("div");
console.log(divArr)
console.log("============================")
//通过类名获取元素
let arr = document.getElementsByClassName("c");
console.log(arr)
console.log("============================")
let nameArr = document.getElementsByName("d");
console.log(nameArr)
</script>
innerText
设置元素的内部文本
textContent
设置元素的文本内容
innerHTML
设置的内部文本可以是标签,并且可以被解析。
二、周期函数和延迟函数
1.周期函数
setInterval(函数,间隔时间):按照给定的间隔时间重置执行给定的函数
clearlnterval(周期函数):清除给定的周期函数
2.延迟函数
setTimeout(函数,延迟时间):在给定的延迟事件后执行一次给定的函数
clearTimeout(延迟函数):清除给定的延迟函数
let count = 0;
function showTime() {
let now = new Date(); //创建一个日期对象,默认时间为系统当前时间
let year = now.getFullYear(); //获取年份
let month = now.getMonth() + 1; //获取月份,月份在0~11之间
let date = now.getDate(); //获取日期是当前月的第几天
let hour = now.getHours();//获取小时数
let minute = now.getMinutes(); //获取分钟数
let second = now.getSeconds(); //获取秒数
let time = year + "-" + zerofill(month, 2) + "-" + zerofill(date, 2) + " " + zerofill(hour, 2) + ":" + zerofill(minute,2) + ":" + zerofill(second, 2);
let div = document.getElementById("time");
div.textContent = time;
count++;
//count为10的时候,周期函数需要停止
// if(count == 10){
// clearInterval(t); //清理给定的周期函数
// }
}
// setInterval(showTime, 1000);
// let t = setInterval('showTime()', 1000); //如果第一个参数传递的是一个字符串,该字符串必须是函数的调用
let s = setTimeout(showTime, 3000); //在3秒后执行一次showTime函数
clearTimeout(s);
function zerofill(num, targetLen) {
let str = num + "";
while (str.length < targetLen){
str = "0" + str;
}
return str;
}
三、DOM
1.DOM 概念
DOM(Document Object Model),即文档对象模型,DOM主要提供了对于页面内容的一些操作。在DOM中,所有的内容(标签,文本,注释)都是DOM节点,所有的标签都是DOM元素。
2.节点属性
- parentNode:获取父节点
- childNodes:获取所有下一级子节点
- firstChild:获取第一个子节点
- lastChild:获取最后一个子节点
- nextSibling:获取下一个同级节点
- previousSilbing:获取上一个同级节点
let box = document.getElementById("box");
console.log(box.parentNode) //父节点
let childNodes = box.childNodes; //文本内容包括enter键在内的换行、注释都属于节点
console.log(childNodes)
console.log(box.firstChild) //第一个子节点
console.log(box.lastChild) //最后一个子节点
let first = childNodes[0]; //第一个子节点
console.log(first.nextSibling);
let last = box.lastChild; //最后一个子节点
console.log(last.previousSibling)
3.元素属性
- parentElement:获取父元素
- children:获取所有下一级子元素
- firstElementChild:获取第一个子元素
- lastElementChild:获取最后一个子元素
- nextElementChild:获取下一个同级元素
- previousElementChild:获取上一个同级元素
let box = document.getElementById("box");
// console.log(box.parentNode) //父节点
// let childNodes = box.childNodes; //文本内容包括enter键在内的换行、注释都属于节点
// console.log(childNodes)
// console.log(box.firstChild) //第一个子节点
// console.log(box.lastChild) //最后一个子节点
//
// let first = childNodes[0]; //第一个子节点
// console.log(first.nextSibling);
// let last = box.lastChild; //最后一个子节点
// console.log(last.previousSibling)
console.log(box.parentElement); //父元素,元素也就是标签
let children = box.children; //下一级子元素
console.log(children)
console.log(box.firstElementChild); //第一个子元素
console.log(box.lastElementChild); //最后一个子元素
console.log(box.firstElementChild.nextElementSibling);//第一个子元素的下一个同级元素
console.log(box.firstElementChild.previousElementSibling);//第一个子元素的上一个同级元素
4.节点操作
- createElement():根据给定的标签名创建元素节点
- A.appendChild(B):将节点B追加到节点A的末尾
- A.remove():将节点A从DOM树中移出
- getAttribute(“属性名”):获取给定属性名对应的属性值
- setAttibute(“属性名”,“属性值”):为给定的属性名设置给定的属性值
<input type="button" value="查询" id="searchBtn">
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody id="dataBox">
</tbody>
</table>
</body>
<script type="text/javascript">
let stus = [{
name: '张三1',
sex: '男',
age: 20
},{
name: '张三2',
sex: '男',
age: 20
},{
name: '张三3',
sex: '男',
age: 20
},{
name: '张三4',
sex: '男',
age: 20
}];
let btn = document.getElementById("searchBtn");
btn.onclick = function () {
let dataBox = document.getElementById("dataBox");
let table = dataBox.parentElement; //获取table标签元素
dataBox.remove(); //将tbody从DOM树中移除
dataBox = document.createElement("tbody"); //创建tr标签
dataBox.setAttribute("id", "dataBox");
table.appendChild(dataBox);
for(let i=0; i<stus.length; i++){
let tr = document.createElement("tr"); //创建tr标签
let td = document.createElement("td"); //创建td标签
td.textContent = stus[i].name;
tr.appendChild(td); //将td追加到tr的末尾
td = document.createElement("td"); //创建td标签
td.textContent = stus[i].sex;
tr.append(td);
td = document.createElement("td"); //创建td标签
td.textContent = stus[i].age;
tr.append(td);
dataBox.appendChild(tr);
}
}
</script>
5.节点样式
style样式
节点.style.样式属性 = "值";
class样式
节点.className = "样式名称";
<head>
<meta charset="UTF-8">
<title>节点样式</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #ddd;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div id="a" class="box active"></div>
</body>
<script type="text/javascript">
let div = document.getElementById("a");
// div.style.height = '50px';
// div.style.backgroundColor = "red";
// div.className = "box";
div.className = "box";
</script>