DOM核心
简介
DOM文档对象模型,是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。通过DOM接口可以改变页面的内容、样式和结构
DOM树
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中的所有标签都是元素,DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
获取元素
根据ID获取
- 使用getElementById()方法可以获取带有ID的元素。参数是大小写敏感的字符串,返回一个元素对象
- console.dir()打印返回的元素对象,查看对应的属性和方法
//通过id获取
var dom = document.getElementById('dom');
console.log(dom); //返回的是元素对象
console.dir(dom); //查看元素对象的属性和方法
根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。以伪数组的形式存储。如果页面没有该元素,返回一个空的伪数组
//通过标签名获取
var lis = document.getElementsByTagName('li');
console.log(lis); //返回元素对象的集合,以伪数组的形式存储
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
获取某个元素(父元素)内部所有指定标签名的子元素
var ul = document.getElementById('getElement');
var liOne = ul.getElementsByTagName('li');
console.log(liOne);
通过HTML5新增的方法获取
- 根据类名获得某些元素集合
//通过类名获取元素集合
var part1 = document.getElementsByClassName('part1');
console.log(part1);
- 返回指定选择器的第一个元素对象
//通过指定选择器返回元素对象
var part2 = document.querySelector('.part2'); //类选择器加.
console.log(part2);
var partAll = document.querySelectorAll('.part2');
console.log(partAll);
var ulSelector = document.querySelector('#getElement'); //id选择器加#
console.log(ulSelector);
- 返回指定选择器的所有元素对象
特殊元素获取(body html)
- document.body
//获取body元素
var bodyEle = document.body;
console.log(bodyEle);
- document.documentElement
//获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
事件基础
事件
触发响应的一种机制
组成
- 事件源:事件被触发的对象
- 事件类型:
- 鼠标点击 onclick
- 鼠标经过触发 onmouseover
- 鼠标离开触发 onmouseout
- 获得鼠标焦点触发 onfocus
- 失去鼠标焦点触发 onblur
- 鼠标移动触发 onmousemove
- 鼠标弹起触发 onmouseup
- 鼠标按下触发 onmousedown
- 事件处理程序:通过一个函数赋值的方式完成
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
var btn = document.getElementById('btnSource');
btn.onclick = function() {
var div = document.getElementById('divWait');
div.innerText = '已触发事件';
}
操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式,可以利用DOM操作元素来改变元素里面的内容、属性等
改变元素内容
- element.innerText:不识别HTML标签。从起始位置到终止位置的内容,去除HTML标签,同时空格和换行也去掉
- element.innerHTML:从起始位置到终止位置的全部内容,包括HTML标签,同时保留空格和换行
//改变元素内容
//innerText 不识别html标签,会去除换行和空格
var div = document.getElementById('divWait');
div.innerText = '<strong>已改变元素内容</strong>';
//innerHTML 识别html标签(W3C推荐标准),保留空格和换行
div.innerHTML = '<strong>已改变元素内容</strong>';
改变元素属性
src、href、title、alt
var sunset = document.getElementById('btnSun');
var youfei = document.getElementById('btnYF');
var img = document.querySelector('img');
sunset.onclick = function() {
img.style.display = 'table';
img.src = '/img/20201223新北方 (4).jpg';
img.title = '夕阳';
img.width = 100;
}
youfei.onclick = function() {
img.style.display = 'flex';
img.src = '/img/5fdf8db1cb13495409231a8d96048558d109b2dedc8d.jfif';
img.title = '有翡';
img.width = 100;
}
修改表单属性
input.value、type、disabled
var btnInput = document.querySelector('#btnInput');
var inInput = document.querySelector('input');
btnInput.onclick = function() {
inInput.value = '已点击';
btnInput.disabled = true;
// this.disabled = true; //this指向事件函数的调用者
}
改变样式属性
- 样式修改较多,可以采取操作类名方式更改元素样式
- class保留字,需要使用className来操作元素类名属性
- className会直接更改元素的类名,会覆盖原先的类名
//改变样式属性
var dom = document.getElementById('dom');
dom.onclick = function() {
this.className = 'divDom divChange';
}
排他思想
- 所有元素全部清除样式
- 给当前元素设置样式
节点操作
目的
获取元素方式:
1.利用DO提供的方法获取元素 逻辑性不强,繁琐
2.利用节点层级关系获取元素 逻辑性强,但兼容性稍差
概述
网页中所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node表示
节点基本属性:nodeType(节点类型),nodeName(节点名称),nodeValue(节点值)
- 元素节点:nodeType=1(主要操作)
- 属性节点:nodeType=2
- 文本节点:nodeTYpe=3(包括文字、空格、换行)
节点层级:就近原则
创建节点
- document.write() 直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
- element.innerHTML 创建多个元素时,采用拼接字符串,影响效率。采取数组形式拼接,效率更高,结构稍复杂
- document.createElement() 创建多个元素时,效率比innerHTML拼接字符串更高,比拼接数组稍低一些,但结构更清晰
增加节点
- appendChild 类似push,在尾追加节点
- insertBefore 类似unshift,在头增加节点
删除节点
removeChild
复制节点
- cloneNode() 如果参数为空或false,浅拷贝,只复制标签,不复制内容
- cloneNode(true) 深拷贝,复制标签和内容
获取节点
- 父节点 parentNode
- 子节点 childNodes --比较复杂,获取了所有的子节点
- 子节点 children(非标准)–获取所有子元素节点
- 第一个/最后一个子节点 firstChild/lastChild
- 第一个/最后一个子元素节点 firstElementChild/lastElementChild --兼容性问题,IE9以上支持
- children 是伪元素
- 兄弟节点 nextSibling/preSibling 下一个/上一个兄弟节点,包括元素节点、文本节点
- 兄弟元素节点 nextElementSibling/preElementSibling 下一个/上一个兄弟元素节点 --兼容性问题,IE9以上支持 解决:封装一个兼容性函数
var ul = document.querySelector('.tabHead').querySelector('ul');
console.log(ul.children[ul.children.length - 1]);
//创建节点
var li1 = document.createElement('li');
//添加节点 appendChild类似与push,追加节点
var ul = document.querySelector('.dCreateNode').children[0];
ul.appendChild(li1);
//添加节点
var li2 = document.createElement('li');
ul.insertBefore(li2, ul.children[0]);
var btnSend = document.querySelector('#btnSend');
var ul = document.querySelector('#ul');
var text = document.querySelector('textarea');
btnSend.onclick = function() {
if (text.value == "") {
alert('no content');
} else {
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"; //javascript:;阻止跳转链接
ul.insertBefore(li, ul.children[0]);
btnDel.disabled = false;
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i++) {
a[i].onclick = function() {
ul.removeChild(this.parentNode);
}
}
}
}
//删除节点
var btnDel = document.querySelector('#btnDel');
btnDel.onclick = function() {
if (ul.children.length > 0) {
ul.removeChild(ul.children[ul.children.length - 1]);
} else {
this.disabled = true;
}
}
//克隆节点
var btnClone = document.querySelector('#btnClone');
btnClone.onclick = function() {
ul.appendChild(ul.children[0].cloneNode(true));
}
//动态生成表格
//准备数据
var datas = [{
time: '2021/9/5',
in: 200,
out: 100,
surplus: 100
}, {
time: '2021/9/4',
in: 400,
out: 100,
surplus: 300
}, {
time: '2021/9/3',
in: 0,
out: 100,
surplus: -100
}];
var tDBody = document.querySelector('#tDBody');
for (var i = 0; i < datas.length; i++) {
var tr = document.createElement('tr');
tDBody.appendChild(tr);
for (var k in datas[i]) {
var td = document.createElement('td');
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
var td = document.createElement('td');
td.innerHTML = "<a id='a' href='javascript:;'>删除</a>";
tr.appendChild(td);
}
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
tDBody.removeChild(this.parentNode.parentNode);
}
}