Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )
DOM树又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前页面
想要操作文档中的内容,必须先获取节点对象
document.getElementById
返回元素对象或者null
<div id="num">123</div>
<script>
var num = document.getElementById('num');
console.log(num); //123
console.log(typeof num); //object
console.log(num.innerHTML); //123
</script>
document.getElementsByTagName
element.getElementsByTagName
根据标签名获取元素对象,返回元素对象集合(伪数组),这个集合是动态的,当页面中增加对应的元素,该集合也会增加
<div>123</div>
<div>456</div>
<div>789</div>
<script>
var num = document.getElementsByTagName('div');
console.log(num); //HTMLCollection(3) [div, div, div]
console.log(typeof num); //object
for (var i = 0; i < num.length; i++)
console.log(num[i].innerHTML); //123,456,789
</script>
注意:通过选择器选择时,参数与css中的选择器一致,要加符号
<div class="num1">123</div>
<span class="num1">qqq</span>
<div class="num2">456</div>
<p id="ptest">abcd</p>
<script>
var num1 = document.getElementsByClassName('num1');
console.log(num1); //HTMLCollection(2) [div.num1, span.num1]
var num2 = document.querySelector('div');
console.log(num2); //123
var num2 = document.querySelector('.num2');
console.log(num2); //456
var num = document.querySelectorAll('div');
console.log(num); //NodeList(2) [div.num1, div.num2]
var ppp = document.querySelector('#ptest');
console.log(ppp); //abcd
</script>
获取body或html元素,注意,它们不是方法,不需要加括号
<button id="btn">按钮</button>
<script>
//事件源btn
var btn = document.getElementById('btn');
//事件类型按下,事件处理程序
btn.onclick = function() {
alert("按钮被按下了");
};
</script>
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标左键点击 |
onmouseover | 鼠标经过 |
onmouseout | 鼠标离开 |
onfocus | 获得焦点 |
onblur | 失去焦点 |
onmousemove | 鼠标移动 |
onmousedown | 鼠标按下 |
JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)
element.innerText = ‘文本’;
element.innerHTML = ‘文本’;
<a href="http://www.mi.com" id="link">hhhh</a>
<script>
var link = document.getElementById('link');
console.log(link.href);
link.href = 'http://www.taobao.com';
</script>
可以通过JS修改元素的样式
-
连接的样式名,在js中变为驼峰命名法,如fontSize<a href="#" id="link">hhhh</a>
<script>
var link = document.getElementById('link');
link.style = 'display:block; width:100px; height:100px;';
</script>
<style>
.style1 {
display: block;
width: 100px;
height: 100px;
background-color: red;
}
.style2 {
display: block;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<a href="#" id="link" class="style1">hhhh</a>
<script>
var link = document.getElementById('link');
link.className = 'style2';
</script>
自定义属性必须使用以下三个API操作,不能像内置属性那样操作
<button class="normal" id="qqq">按钮1</button>
<script>
var btn = document.getElementById('qqq');
btn.setAttribute('index', 10);
console.log(btn.getAttribute('index')); //10
btn.removeAttribute('index');
console.log(btn.getAttribute('index')); //null
</script>
自定义属性很容易引起歧义,不容易判断到底是自定义的还是内置的,因此H5增加了自定义属性
H5规定自定义属性以data-
开头,例如
<div data-index='1'>div>
dataset
是一个以data-
开头的自定义属性的集合
//老方法
element.setAttribute('data-index', 10);
//h5新方法
element.dataset.index = 10;
element.dataset['index'] = 10;
//老方法
element.getAttribute('data-index');
//h5新方法
console.log(btn.dataset.index);
console.log(btn.dataset['index']);
node.parentNode 返回该节点最近的父节点,如果没有父节点则返回null
<div>
<button class="normal" id="qqq">按钮1</button>
</div>
<script>
var btn = document.getElementById('qqq');
console.log(btn.parentNode);
</script>
<div id="father">
<button class="normal" id="son">按钮1</button>
<button class="normal">按钮2</button>
<button class="normal">按钮3</button>
<button class="normal">按钮4</button>
</div>
<script>
var father = document.getElementById('father');
console.log(father.childNodes);
</script>
console.log(father.children);
同childNodes一样,以下两种方式也是返回所有的节点,找不到则返回null
这两种方法不推荐使用,因为会返回所有节点,不便操作
同children一样,以下两种方式只返回元素节点
这两种方法有兼容性问题,也不推荐使用
实际使用中的解决方案
xxxSibling返回的节点,包括文本节点、注释节点、换行、空格、文本等
xxxElementSibling返回的节点,是同等层级下的节点,不包括下一层的诸如文本节点、注释节点,但是有兼容性问题
如何解决兼容性问题
调用node.nextSibling,循环去获取节点,如果获取到的nodeType = 1时,才返回,这样能实现nextElementSibling的效果
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
document.createElement()方法创建指定标签的HTML元素,称为动态创建元素
<div id="father">
<button class="normal" id="son">1</button>
<button class="normal">2</button>
</div>
<script>
var father = document.getElementById('father');
var btn1 = document.createElement('button');
btn1.className = 'normal';
btn1.innerHTML = '3';
father.appendChild(btn1);
var btn2 = document.createElement('button');
btn2.className = 'normal';
btn2.innerHTML = '4';
father.insertBefore(btn2, father.children[0]);
</script>
node.removeChild(子节点):删除对应的子节点,并返回被删除的节点
console.log(father.removeChild(father.children[0]));
var father = document.getElementById('father');
var btn1 = father.children[0].cloneNode();
var btn2 = father.children[0].cloneNode(true);
father.appendChild(btn1);
father.appendChild(btn2);
<div id="father">
<div id="son">1</div>
</div>
<script>
var node = document.getElementById('son');
node.onclick = function() {
//1. 点击div时,调用write会导致整个页面重绘
document.write('123');
//2. 点击div时,在div内部增加超链接文本
node.innerHTML += '百度';
//2. 利用数组拼接,一次性增加大量节点
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('百度');
}
node.innerHTML = arr.join('');
//3. createElement创建节点后添加
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
a.innerHTML = "baidu";
node.appendChild(a);
}
};
</script>