JavaScript——DOM（包括DOM简介、获取元素、事件基础、操作元素、节点操作）

最新推荐文章于 2023-06-08 22:11:21 发布

不贰 Encoded

最新推荐文章于 2023-06-08 22:11:21 发布

阅读量583

点赞数 3

分类专栏： Web APIs 笔记文章标签： javascript 前端 DOM

本文链接：https://blog.csdn.net/weixin_43900069/article/details/106302399

版权

笔记同时被 2 个专栏收录

73 篇文章 2 订阅

订阅专栏

Web APIs

7 篇文章 0 订阅

订阅专栏

DOM简介

文档对象模型（DOM），就是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
作用：通过这些DOM接口，可以改变网页的内容、结构和样式。
DOM树：

（1）文档：一个页面就是一个文档，DOM中使用document表示

（2）元素：页面中所有标签都是元素，DOM中使用element表示

（3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

（4）DOM把以上三种都看做是对象

获取元素

1.根据ID获取

使用getElementById()方法获取带有ID的元素对象。小括号里的参数是大小写敏感的字符串ID名，并且返回的是一个元素对象，如果页面没有这个对象，则返回null。console.dir()方法可以返回元素对象，以便开发人员更好地查看里面的属性和方法。

document.getElementById('ID');

2.根据标签名获取

使用getElementsBytagName()方法可以返回带有指定标签名的对象的集合。返回的是获取过来的元素对象的集合，以伪数组的形式存储，并且里面的每个元素都是对象。
通过getElementsBytagName()方法得到的元素对象是动态的。
如果页面中只有一个标签，返回值还是以伪数组的形式存在。
如果页面中没有这个元素标签，返回值是一个空的伪数组。

document.getElemrntsByTagName('标签名');

使用getElementsBytagName()方法还可以获取某个元素（父元素）内部所有指定标签名的子元素。（获取的时候不包括父元素自己）注意：父元素必须是单个对象。

element.getElemrntsByTagName('标签名');

3.通过HTML5新增的方法获取

（1）getElementsByClassName()

document.getElementsByClassName('类名');	//根据类名返回元素对象集合

（2）querySelector()

document.querySelector('选择器');		//根据指定选择器返回第一个元素对象
										//注意：里面的选择器要加符号，比如类就要加'.'

（3）querySelectorAll()

document.querySelectorAll('选择器');		//根据指定选择器返回所有的元素对象集合

4.获取特殊元素（body、html）

获取body元素：

document.body		//返回body元素对象

获取html元素：

document.documentElement		//返回html元素对象

5.拓展

获取元素的方式可以是下面这种情况：

document.getElementById('ID').querySelectorAll('选择器');

事件基础

事件三要素：事件源、事件类型和事件处理程序。

（1）事件源：事件被触发的对象

（2）事件类型：如何触发，比如：鼠标点击、鼠标经过

（3）事件处理程序：通过一个函数赋值的方式完成

btn.onclick = function(){
  alert('蟹黄堡');
}

执行事件的步骤：

（1）获取事件源

（2）注册事件（绑定事件）

（3）添加事件处理程序（采取函数赋值的形式）
常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouserover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

1.改变元素内容

element.innerText

从起始位置到终止位置的内容，但它不识别html标签，同时去除空格和换行。（可读写的）

element.innerHTML

起始位置到终止位置的全部内容，能够识别html标签，同时保留空格和换行。（可读写的）

2.常用元素的属性操作

src、href、id、alt、titile等属性都是可以通过“元素.属性“的方法修改属性值。

<button>阿拉斯加</button>
<button>柯基</button>
<img src="images/dog1.jpg" alt=''>
<script>
var dog1 =document.getElementById('dog1');
var dog2 =document.getElementById('dog2');
var img = document.querySelector('img');

dog2.onclick = function(){
  img.src = 'images/dog2.jpg';
}
dog1.onclick = function(){
  img.src = 'images/dog1.jpg';
}
</script>

3.表单元素的属性操作

type、value、checked、selected、disabled等表单元素的属性也都是可以通过“元素.属性“的方法修改属性值。(可读写)

4.样式属性操作

修改元素大小、颜色、位置等样式等方法有以下两种：

（1）element.style ——行内样式操作
```
var div = document.querySelector('div');
div.onclik = function(){
  this.style.background = 'blue';
}
```
注意：
JS里面的样式采取驼峰命名法，比如：fontSize、backgroundColor；
JS修改style样式操作，产生的是行内样式，css权重比较高。

（2）element.className ——类名样式操作
```
//css
<style>
.change{
  background-color: blue;
	color: #fff;
  font-size: 20px;
	margin-top: 100px;
}
</style>

//html
<div class="text">文本内容</div>

//JS
<script>
var div = document.querySelector('div');
div.onclik = function(){
  div.className = 'text change';
}
</script>
```
注意：
如果样式修改较多，可以采用操作类名方式更改元素样式；
className会直接更改元素的类名，会覆盖原先的类名。

5.排他思想

排他思想算法实现的步骤：顺序不能颠倒

（1）所有元素全部清除样式

（2）给当前元素设置样式

6.自定义属性的操作

（1）获取属性值

element.属性
Element.getAttribute(‘属性’)

区别：
element.属性：获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)：主要获取自定义属性（程序员自定义的属性）

（2）设置属性值

element.属性 = ‘值’
element.setAttribute(‘属性’,‘值’)

区别：
element.属性 = ‘值’：获取内置属性值（元素本身自带的属性）
element.setAttribute(‘属性’,‘值’)：主要设置自定义属性

var div = doucument.querySelector('div');
div.className = 'test';	
div.setAttribute('class','test');

（3）移除属性

element.removeAttribute(‘属性’)

7.H5自定义属性

自定义属性的目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

（1）设置H5自定义属性

H5规定自定义属性的属性名以data-开头。

（2）获取H5自定义属性

兼容性获取，element.getAttribute(‘data-index’)，该方法可以获取自定义属性，不管是否以data-开头。
H5新增element.dataset.index或者element.dataset[‘index’]，ie11才开始支持，该方法只能获取以data-开头的自定义属性。其中，dataset是一个集合，里面存放了所有以data开头的自定义属性。如果自定义属性里面有多个以-链接的单词，获取的时候需要采用驼峰命名法，详情如下：

<div data-list-name = 'andy'></div>
<script>
  var div = document.querySelector('div');
	console.log(div.getAttribute('data-list-name'));
	console.log(div.dataset.listName);
	console.log(div.dataset['listName']);
</script>

节点操作

学习节点操作的原因：利用节点层级关系（父子兄关系）获取元素比利用DOM提供的方法获取元素逻辑性更强，操作更简单。
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以被创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性。

元素节点的nodeType为：1

属性节点的nodeType为：2

文本节点的nodeType为：3（文本节点包含文字、空格、换行等）

1.父级节点

//父级节点的语法格式如下：
node.parentNode

var title = document.querySelector('.title');
console.log(title.parentNode);

parentNode属性返回的是某节点的父节点，注意是最近的一个父节点。
如果指定的节点没有父节点，则返回null。

2.子节点

//子节点的语法格式1如下：
parentNode.childNodes(标准)

parentNode.chiledNodes返回包含指定节点的子节点的集合，该集合为及时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

//如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用chileNodes
//只获取元素节点的处理如下：
var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++){
  if(ul.childNodes[i].nodeType == 1){
    console.log(ul.childNodes[i]);
  }
}

//子节点的语法格式2如下：
parentNode.children（非标准）

parentNode.children是一个只读属性，返回所有子元素节点。它只返回子元素节点，其余节点不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，可以放心使用，并且我们经常使用的也是这个。
获取第一个子元素和最后一个子元素：

方法一：

parentNode.firstChild
//firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
parentNode.lastChild
//lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

方法二（该方法有兼容性问题，IE9以上才支持）：

parentNode.firstElementChild
//firstElementChild返回第一个子元素节点，找不到则返回null
parentNode.lastElementChild
//lastElementChild返回最后一个子元素节点，找不到则返回null

方法三（实际开发的写法，没有兼容性问题）：

parentNode.children[0]
//获取第一个子元素节点
parentNode.children[parent.children.length - 1]
//获取最后一个子元素节点

3.兄弟节点

方法一：

node.nextSibling
//extSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
node.previousSibling
//previousSibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

//如果想要获取兄弟元素节点，则可以采取以下方法——封装函数：
function getNextElementSibling(element){
  var el = element;
  while(el = el.nextSibling){
    if(el.nodeType === 1){
      return el;
    }
  }
  return null;
}

方法二（该方法有兼容性问题，IE9以上才支持）：

node.nextElementSibling
//nextElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。
node.priviousElementSibling
//priviousElementSibling返回当前元素的上一个兄弟节点，找不到则返回null。

4.创建和添加节点

创建节点：

//创建节点的语法格式如下：
document.createElement('tagName');

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们称为动态创建元素节点。
添加节点：

//添加节点的语法格式1如下：
node.appendChild(child);		//node是父级，child是子级

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。

//添加节点的语法格式2如下：
node.insertBefore(child,指定元素);	//node是父级，child是子级

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。

5.删除节点

//删除节点的语法格式如下：
node.removechild(child);		//node是父级，child是子级

node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。

6.复制节点/克隆节点

//复制节点的语法格式如下：
node.cloneNode();

node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。
如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。

7.三种动态创建元素的区别

document.write()
element.innerHTML
document.createElement()
区别：

document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。

innerHTML创建多个元素效率更高（前提是不要采用拼接字符串，而是采取数组形式），结构稍微复杂。

createElement()创建多个元素效率稍微低一点点，但是结构更清晰。

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！

不贰 Encoded

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——DOM（包括DOM简介、获取元素、事件基础、操作元素、节点操作）

DOM简介文档对象模型（DOM），就是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。作用：通过这些DOM接口，可以改变网页的内容、结构和样式。DOM树：（1）文档：一个页面就是一个文档，DOM中使用document表示（2）元素：页面中所有标签都是元素，DOM中使用element表示（3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示（4）DOM把以上三种都看做是对象获取元素1.根据ID获取使用getEle
复制链接

扫一扫

专栏目录