Javascript面向对象基础 - DOM篇
DOM简介
-
DOM的概念
- 文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口。
- W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
-
DOM树
- 文档:一个页面就是一个文档,DOM中使用document表示
- 节点:网页中的所有内容,在文档树中都是节点(标签、属性、文本、注释等),使用node表示
- 标签节点:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示
获取元素
- 根据ID获取
- 语法:
document.getElementById(id)
- 作用:根据ID获取元素对象
- 参数:id值,区分大小写的字符串
- 返回值:元素对象 或 null
- 语法:
<body>
<div id="time">2019-9-9</div>
<script>
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
- 根据标签名获取元素
- 语法:
document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
- 作用:根据标签名获取元素对象
- 参数:标签名
- 返回值:元素对象集合(伪数组,数组元素是元素对象)
- 语法:
<body>
<ul>
<li>知否知否,应是等你好久11</li>
<li>知否知否,应是等你好久22</li>
<li>知否知否,应是等你好久33</li>
<li>知否知否,应是等你好久44</li>
<li>知否知否,应是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav'); // 这个获得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
- H5新增获取元素方式
- 根据类名返回元素对象集合:
document.getElementsByClassName('类名');
- 根据指定选择器返回第一个元素对象:
document.querySelector('选择器');
- 根据指定选择器返回:
document.querySelectorAll('选择器');
- 注意:querySelector 和 querySelectorAll里面的选择器需要加符号('#nav')
- 根据类名返回元素对象集合:
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
- 获取特殊元素(body,html)
- 获取body元素:document.body
- 获取html元素:document.documentElement
操作元素
- 改变元素的内容(获取或设置)
- 从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉:
element.innerText
- 起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行:
element.HTML
- 从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉:
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮, div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
innerText
和innerHTML
的区别- 获取内容时的区别:
innerText
会去除空格和换行,而innerHTML
会保留空格和换行 - 设置内容时的区别:
innerText
不会识别html,而innerHTML
会识别
- 获取内容时的区别:
<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是:</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是:</strong> 2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
- 常用元素的属性操作
innerText
innerHTML
src
href
id
alt
title
- 获取属性的值:
元素对象.属性名
- 设置属性的值:
元素对象.属性名 = 值
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
</body>
- 表单元素的属性操作
- 利用DOM可以操作如下表单元素的属性:
type
value
checked
selected
disabled
- 获取属性的值:
元素对象.属性名
- 设置属性的值:
元素对象.属性名 = 值
- 利用DOM可以操作如下表单元素的属性:
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function() {
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
}
</script>
</body>
- 样式属性操作
- 行内样式操作:
element.style
元素对象.style.样式属性 = 值
;- JS里面的样式采取驼峰命名法,比如fontSize、backgroundColor
- JS修改style样式操作,产生的是行内样式,CSS权重比较高
- 类名样式操作:
element.className
元素对象.className = 值;
- 如果样式修改较多,可以采取操作类名方式更改元素样式
- class因为是个保留字,因此使用className来操作元素类名属性
- className会直接更改元素的类名,会覆盖原先的类名
- 行内样式操作:
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function() {
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = 'purple';
this.style.width = '250px';
}
</script>
</body>
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名,我们可以这么做 多类名选择器
// this.className = 'change';
this.className = 'first change';
}
</script>
</body>
- 获取属性值
- 获取属性值:
element.属性
- 获取内置属性值(元素本身自带的属性)
- 获取自定义属性值:
element.getAttribute('属性')
- 主要获得自定义的属性
- 获取属性值:
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 获取元素的属性值
// (1) element.属性
console.log(div.id);
//(2) element.getAttribute('属性') get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
- 设置属性值
- 设置属性值:
element.属性 = '值'
- 设置自定义属性值:
element.setAttribute('属性','值')
- 设置属性值:
div.id = 'test';
div.className = 'navs';
div.setAttribute('index', 2);
div.setAttribute('class', 'footer');
// class 特殊 这里面写的就是class 不是className
- 移出属性
element.removeAttribute('属性')
div.removeAttribute('index');
-
H5自定义属性
- 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
- 自定义属性获取是通过getAttribute(‘属性’) 获取。
- 但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
-
设置H5自定义属性
- H5规定自定义属性以
data-
开头,作为属性名并且赋值
- H5规定自定义属性以
<div data-index='1' id='div'></div>
<script>
var div = document.getElementById('div');
div.setAttribute('data-index','2');
</script>
- 获取H5自定义属性
- 兼容性获取:
element.getAttribute('data-index');
- H5新增(IE 11才开始支持):
element.dataset.index
或者element.dataset[index]
- 兼容性获取:
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词,我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
节点操作
-
节点概述
- 网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。
- HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
- 一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点
nodeType
为1 - 属性节点
nodeType
为2 - 文本节点
nodeType
为3 (文本节点包含文字、空格、换行等)
- 元素节点
- 我们在实际开发中,节点操作主要操作的是元素节点
-
节点层级
- 利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
-
父级节点
node.parentNode
- 该属性可返回某节点的父节点,注意是
最近的一个父节点
- 如果指定的节点没有父节点,则返回null
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
- 子节点
- 所有子节点
parentNode.childNodes
(标准)- 返回包含指定节点的子节点的集合,该集合为即时更新的集合
- 返回值里包含了所有的子节点,包括元素节点,文本节点等
- 如果只想要获得里面的元素节点,则需要专门处理,所以我们一般不提倡使用childNodes
- 子元素节点
parentNode.children
(非标准)- 该属性是一个只读属性,返回所有的子元素节点,它只返回子元素节点,其余节点不返回
- 虽然
children
是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
- 所有子节点
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法(API)获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
-
第一个子节点
parentNode.firstChild
- 返回第一个子节点,找不到则返回null,同样,也是包含所有的节点
-
最后一个子节点
parentNode.lastChild
- 返回最后一个子节点,找不到则返回null,同样,也是包含所有的节点
-
第一个子元素节点(IE 9以上支持)
parentNode.firstElementChild
- 返回第一个子元素节点,找不到则返回null
-
最后一个子元素节点(IE 9以上支持)
parentNode.lastElementChild
- 返回最后一个子元素节点,找不到则返回null
-
日常开发
- 获取第一个子元素节点:
parentNode.children[0]
- 获取最后一个子元素节点:
parentNode.children[parentNode.children.length-1]
- 获取第一个子元素节点:
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
-
下一个兄弟节点
node.nextSibling
- 返回当前元素的下一个兄弟节点,找不到则返回null
-
上一个兄弟节点
node.previousSibling
- 返回当前元素上一个兄弟节点,找不到则返回null
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一个兄弟元素节点
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
-
下一个兄弟元素节点((IE 9以上支持))
node.nextElementSibling
- 返回当前元素下一个兄弟元素节点,找不到则返回null
-
上一个兄弟元素节点((IE 9以上支持))
node.previousElementSibling
- 返回当前元素上一个兄弟节点,找不到则返回null
-
兼容性解决方案(封装一个兼容性函数)
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
-
创建节点
document.createElement('tagName')
- 动态创建元素节点
-
添加节点
node.appendChild(child)
- 此方法将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child, 指定元素)
- 此方法将一个节点添加到指定父节点的子节点列表前面
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
</script>
- 删除节点
node.removeChild()
- 此方法从 node节点中删除一个子节点,返回删除的节点。
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
- 复制(克隆)节点
node.cloneNode()
- 此方法返回调用该方法的节点的一个副本,也称拷贝节点
- 如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
- 如果括号参数为true,则是深拷贝,即会克隆复制节点本身以及里面所有的子节点。
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
创建元素的三种方式
-
document.write();
- 直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
-
element.innerHTML
- 将内容写入某个DOM节点,不会导致页面全部重绘
- 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
-
createElement()
- 创建多个元素效率稍低一点点,但是结构更清晰
-
不同浏览器下,
element.innerHTML
效率要比createElement()
高
<script>
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕,再调用这句话会导致页面重绘
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>123</div>');
}
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>'
}
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
innerTHML
和createElement
效率对比
innerHTML
字符串拼接方式(效率低)
(function () {
var d1 = +new Date();
for (var i = 0; i < 1000; i++) {
document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
}
var d2 = +new Date();
console.log(d2 - d1);
})();
createElement
方式(效率一般)
(function () {
var d1 = +new Date();
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '2px';
div.style.border = '1px solid red';
document.body.appendChild(div);
}
var d2 = +new Date();
console.log(d2 - d1);
})();
innerHTML
数组方式(效率高)
(function () {
var d1 = +new Date();
var array = [];
for (var i = 0; i < 1000; i++) {
array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
}
document.body.innerHTML = array.join('');
var d2 = +new Date();
console.log(d2 - d1);
})();
DOM的核心总结
-
概述
- 对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的DOM编程接口
- 对于HTML,DOM使得HTML形成了一棵DOM树,包含文档、元素、节点
- 关于DOM操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
-
创建
document.write();
element.innerHTML
与数组结合,效率最高createElement()
-
增加
node.appendChild(child)
末尾追加node.insertBefore(child, 指定元素)
前置追加
-
删除
node.removeChild()
返回删除节点
-
修改
- 修改元素属性:
src href title
- 修改普通元素内容:
innerHTML innerText
- 修改表单元素:
value type disabled
- 修改元素样式:
style className
- 修改元素属性:
-
查询
- DOM提供的API方法:
getElementById getElementByTagName
- H5提供的新方法:
querySelector querySelectorAll
- 利用节点操作获取元素:
parentNode children previousElementSibling nextElementSibling
- DOM提供的API方法:
-
属性操作
setAttribute
设置DOM的属性值getAttribute
得到DOM的属性值removeAttribute
移除属性