前端学习(十八)webAPI基础1
web APIWeb API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )DOM文档对象模型(Document Object Model):是W3C组织推荐的处理可拓展标记语言的标准编程接口,所有的浏览器都遵循这套规范通过DOM接口,可以改变网页的内容、结构、样式DOM树DOM树又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当
web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )
DOM
- 文档对象模型(Document Object Model):是W3C组织推荐的处理可拓展标记语言的标准编程接口,所有的浏览器都遵循这套规范
- 通过DOM接口,可以改变网页的内容、结构、样式
DOM树
DOM树又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前页面
- 文档:一个页面就是一个文档,DOM中使用document表示
- 节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示
- 标签节点:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示
获取元素
想要操作文档中的内容,必须先获取节点对象
根据ID获取
document.getElementById
返回元素对象或者null
<div id="num">123</div>
<script>
var num = document.getElementById('num');
console.log(num); //<div id="num">123</div>
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>
根据H5新方法获取
- getElementsByClassName:通过类名选择,返回元素对象集合
- querySelector:通过选择器选择,返回符合条件的第一个元素对象
- querySelectorAll:通过选择器选择,返回元素对象集合
注意:通过选择器选择时,参数与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); //<div class="num1">123</div>
var num2 = document.querySelector('.num2');
console.log(num2); //<div class="num2">456</div>
var num = document.querySelectorAll('div');
console.log(num); //NodeList(2) [div.num1, div.num2]
var ppp = document.querySelector('#ptest');
console.log(ppp); //<p id="ptest">abcd</p>
</script>
获取特殊元素
获取body或html元素,注意,它们不是方法,不需要加括号
- document.body
- document.documentElement
事件基础
概述
- 事件:可以被js侦测到的行为,例如按钮按下,鼠标按下,鼠标移动等
- 网页中的每个元素,都可以产生事件,因此可以在js代码中,对事件做出响应
事件三要素
- 事件源:是谁触发的事件
- 事件类型:什么类型的事件,例如点击click
- 事件处理程序:事件发生后,执行什么处理函数
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(函数赋值)
<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 = ‘文本’;
- 区别:
- innerText有兼容性问题,推荐使用innerHTML
- innerHTML包含html标签,innerText中不包含html标签,如果写标签在里面,会不经过渲染直接显示标签的代码
- 首尾的空格会被去掉,中间如果有多个空格,只保留一个
元素属性操作
- element.属性名:获取属性
- element.属性名= …:设置属性
<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修改元素的样式
- 方式1:修改行内样式 element.style
- 原来在css中用
-
连接的样式名,在js中变为驼峰命名法,如fontSize - 行内样式的权重较高
- 原来在css中用
<a href="#" id="link">hhhh</a>
<script>
var link = document.getElementById('link');
link.style = 'display:block; width:100px; height:100px;';
</script>
- 方式2:修改类名 element.className
- 如果需要修改的样式较多,建议该方法
- class是保留字,因此使用className
- 该方法会覆盖原先的类名
<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操作,不能像内置属性那样操作
- setAttribute:设置自定义属性
- getAttribute:获取自定义属性
- removeAttribute:移除自定义属性
<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增加了自定义属性
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']);
节点操作
概述
- 网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示
- HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除
- 一般节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性,实际开发中,主要操作元素节点
- nodeType = 1:元素节点
- nodeType = 2:属性节点
- nodeType = 3:文本节点
- 利用DOM树,可以把节点划分未不同的层级关系(父子兄)
父节点
node.parentNode 返回该节点最近的父节点,如果没有父节点则返回null
<div>
<button class="normal" id="qqq">按钮1</button>
</div>
<script>
var btn = document.getElementById('qqq');
console.log(btn.parentNode);
</script>
子节点
- father.childNodes:所有的子节点,包括属性节点、文本节点
- 该集合是实时更新的
- 包含了所有的子节点,包括元素节点、属性节点、文本节点
- 如果只想获取里面的元素节点,需要专门处理,一般不推荐使用
<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>
- father.children:返回所有子元素节点,注意只返回元素节点,该属性只读
console.log(father.children);
第N个节点
同childNodes一样,以下两种方式也是返回所有的节点,找不到则返回null
这两种方法不推荐使用,因为会返回所有节点,不便操作
- 第一个节点:father.firstChild
- 最后一个节点:father.lastChild
同children一样,以下两种方式只返回元素节点
这两种方法有兼容性问题,也不推荐使用
- 第一个子元素节点:father.firstElementChild
- 最后一个子元素节点:father.lastElementChild
实际使用中的解决方案
- 第一个子元素节点:father.children[0]
- 最后一个子元素节点:fater.children[fater.children.length - 1]
兄弟节点
xxxSibling返回的节点,包括文本节点、注释节点、换行、空格、文本等
- 下一个兄弟节点:node.nextSibling
- 上一个兄弟节点:node.previousSibling
xxxElementSibling返回的节点,是同等层级下的节点,不包括下一层的诸如文本节点、注释节点,但是有兼容性问题
- 下一个兄弟节点:node.nextElementSibling
- 上一个兄弟节点:node.previousElementSibling
如何解决兼容性问题
调用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元素,称为动态创建元素
添加节点
- node.appendChild将元素添加到节点末尾
- node.insertBefore将元素插入到指定的子节点之前
<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]));
复制节点
- node.cloneNode():浅拷贝,只复制节点本身,不复制其中的子节点(文本节点、属性节点之类的)
- node.cloneNode(true):深拷贝,完全复制节点,包括所有的子节点
var father = document.getElementById('father');
var btn1 = father.children[0].cloneNode();
var btn2 = father.children[0].cloneNode(true);
father.appendChild(btn1);
father.appendChild(btn2);
创建元素的三种方式
- document.write()
- element.innerHTML()
- document.createElement()
<div id="father">
<div id="son">1</div>
</div>
<script>
var node = document.getElementById('son');
node.onclick = function() {
//1. 点击div时,调用write会导致整个页面重绘
document.write('<div>123</div>');
//2. 点击div时,在div内部增加超链接文本
node.innerHTML += '<a href="#">百度</a>';
//2. 利用数组拼接,一次性增加大量节点
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
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>
三种方式的对比
- document.write:会导致重绘,不推荐使用
- node.innerHTML拼接字符串:效率极低,反复申请内存
- node.innerHTML拼接数组:效率高,结构复杂
- document.createElement:效率一般,容易理解
更多推荐
所有评论(0)