DOM元素操作

DOM简介

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM 树相关概念：
dom 树是在浏览器在加载网页文档过程中渲染页面前，根据文档生成描述文档结构的树状结构。
在这里插入图片描述

文档：一个页面就是一个文档，DOM 中使用 document 表示。
元素：页面中的所有标签都是元素，DOM 中使用 element 表示。
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示。

DOM 中把以上内容都看作是对象。

获取元素

在操作元素之前必须要首先获得相应元素才能进操作，以下学习几种获取元素的 API 。
1、根据 ID 获取元素

// getElementById('id');方法可以获取带有指定ID的元素对象。
var btn0 = document.getElementById('btn0');

2、根据标签名获取元素

// getElementsByTagName('标签名');方法可以返回带有指定标签名的对象的集合。
var lis = document.getElementsByTagName('li');
var ols = document.getElementsByTagName('ol');
vat olLis = ols[0].getElementsByTagName('li');

注意：
(1) 因为得到的是一个对象集合，所以我们想要操作里面的元素就需要遍历。
(2) 得到的元素是动态的（html结构发生改变伪数组里面的内容也会改变）。
(3) 如果获取不到元素，则返回为空的伪数组（因为获取不到对象）。
(4) 获取某个元素（祖先元素）内部所有指定标签名的元素时，祖先元素必须是单个元素（必须指明是哪个元素对象，例如上面的 document、ols[0]）获取的时候不包括祖先元素自己。

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

// 1、getElementsByClassName('类名');方法返回指定类名的元素对象的集合。
var tabItems = document.getElementsByClassName('tab_item');
// 2、querySelector('选择器');返回与指定选择器相匹配的第一个元素对象。
var btn0 = document.querySelector('#btn0');
var current = document.querySelector('ul li.current');
// 3、querySelectorAll('选择器');返回与选择器匹配的所有元素对象的集合。
var lis = document.querySelectorAll('ul li');

注意：querySelector 和 querySelectorAll 里面的选择器参数需要加选择器指定符号。

4、获取特殊元素( body html)

var bd = document.body; // 返回body元素对象
var htmlEle = document.documentElement; // 返回html元素对象

事件基础

javascript 使我们有能力创建动态页面，而事件是可以被 javascript 侦测到的行为。javascript 事件被侦测到（触发）后能够做出响应（执行事件处理程序）。网页中的每个事件都可以产生某些可以触发 javascript 的事件，例如我们可以在用户点击某个按钮时产生一个事件，然后去执行我们设定的某些操作；单用户点击链接（如果我们没有做任何其他处理）时会跳转到相应页面或者锚点，这是默认的操作（行为）。
在事件基础部分，我们只需要知道关于事件在编程时我们要关注的是事件的三要素和为元素简单绑定（注册）事件。
事件的三要素：

事件源，绑定事件前要明确要给哪个元素对象绑定事件。
事件类型，为满足需求应该给事件源绑定什么事件(例如：鼠标点击还是移入，键盘按下还是弹起等)。
事件处理程序，在发生（触发事件后）程序要执行哪些操作。

事件简单绑定语法：

var btn = document.getElementById('btn');
btn.onclick = function() {
    
    
	console.log('已经为按钮绑定好点击事件');
}
// 事件源btn;事件类型鼠标点击;事件处理程序function(){}的内部处理语句。

了解更多有关 javascript 的事件。

操作元素

javascript 的 DOM 操作可以改变网页的内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。以下都是属性。

改变元素内容

改变或者获取元素的内容的属性有：innerText、innerHTML

<body>
    <div class="test">您的名字：<span>扬尘</span></div>
</body>

	// 1、innerText获取元素的文本内容（只会获取文本节点）
	var div = document.querySelector('.test');
    console.log(div.innerText); // ->您的名字：扬尘
    // 2、innerHTML获取元素的全部内容（包含所有的节点）
    console.log(div.innerHTML); // ->您的名字：<span>扬尘</span>
    // 3、修改内容
    div.innerHTML = '我的名字：<sapn>不告诉你</span>';
    div.innerText = '拉倒'; 
    // 注意：innerText不能识别其他节点类型，如果有标签也是直接显示出来

属性操作

常用元素的属性操作

innerText、innerHTML 改变元素的内容。
src、herf
id、alt、title

表单元素的属性操作

type : 改变表单类型。
value : 改变表单的值（内容）。
checked : 改变复选框（或者单选按钮）选项的选中属性。
selected : 改变下拉单选元素选项中的选中属性。
disabled : 改变表单控件是否禁用的属性。

样式属性操作

我们可以通过 js 修改元素的大小、颜色、位置等属性。使用到的是 style 属性和 className 属性。

// style属性进行的是行内样式操作（实际上是添加了行内样式或改变了元素的行内样式属性style）
var div = document.querySelector('div');
div.style.fontSize = '12px';
div.style.backgroundColor = 'red';
// 实际上是给文档中的div元素添加或者改变了style属性。
// 比如：原<div style="color:yellow;font-size:16px;" 
// 	现<div style="font-size:12px;background-color:red;"

注意：

属性值必须要加引号（字符串形式），无论是什么样的值。

属性名采用小驼峰的命名方式

// className属性进行的是类名样式操作，即将元素的类属性进行修改。
// 在css样式文件中不同的类设置有不同的样式，因此也就达到了修改样式的目的。
div.className = 'current';
div.className = '';

如果修改的样式较多，可以采取操作类名方式更改元素样式。
class 是个保留字所以使用 className 来操作元素类名属性。
className 会直接更改元素的类名，会覆盖原先的类名。

样式属性操作

之所以将这个属性单独记录是因为它是 h5 新增属性，兼容性较差， ie10 以上的浏览器支持。但感觉又挺实用的所以就大概记了一下。

// 可以返回元素具有的类名列表
var div = document.querySelector('div');
console.log(div.classList[1]);
// 以追加的形式给元素添加类名（不会覆盖以前具有的类名）
div.classList.add('newClassName');
// 删除某个类名
div.classList.remove('targetClassName');
// 切换类名，如果具有就删除，如果没有就添加
div.classList.toggle('xxclass');

自定义属性操作

自定义属性是我们为了表明某些信息而自定义的一些属性，例如 tab 栏中为了标识我们选中的是哪一栏而给每一个 li 设置一个 index 属性。这类属性是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。
1、获取属性值

element.属性； 获取内置属性值,这种方式不能获取自定义属性的值。
element.getAttribute('属性'); 方法不管是固有属性还是自定义属性的值都可以获取（主要用于获取自定义属性）。

2、设置属性值

element.属性 = '值'; 用于设置内置属性值。
element.setAttribute('属性名'，'值'); 主要设置自定义的属性（标准）。

3、移除属性

element.removeAttribute('属性'); 移除自定义属性。

4、有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5 为此规定了一些新的使用规则。

自定义属性 data- 开头做为属性名并赋值。 例如：<div data-index=“1”></div> 或 element.setAttribute('data-index',2)。
获取可以使用 element.getAttribute('data-index')；也可以使用 H5 新增的方式 element.dataset.index 或者 element.dataset[index] 来获取，但是 ie11 才开始支持。

DOM简介

获取元素

事件基础

操作元素

改变元素内容

属性操作

样式属性操作

样式属性操作

自定义属性操作

猜你喜欢