浅谈DOM的概念和作用

首先呢，DOM在JS中就是 Document Object Model的缩写，简称就是文档对象类型，它给文档提供了一种结构化的表示方式，可以改变文档的内容和呈现方式。不过我们要关心的是DOM如何把网页和脚本以及其他的编程语言联系起来。DOM是以家族的形式描述HTML。父子节点，兄弟节点。

DOM中的选择器：

一、元素节点选择器：（id,class,name,tagname,高级,关系）

1.getElementById(id) //获取指定元素的ID元素，返回的是单个对象

2.getElementsByTagName() //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组

3.getElementsByName() //通过name值获取元素，返回值是数组，通常用来获取有name的input的值

4.getElementsByClassName() //通过class名获取元素，返回值是数组n

注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

高级选择器：

所以为了解决兼容性的问题，在ES5中就新增了选择器:（强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的)

document.querySelectorAll(); //返回一个数组，哪怕只有一个元素

document.querySelector(); //返回单个元素

关系选择器：(兼容性不好)

根据父级，选择子级： oDiv.children; //返回一个数组

根据子级，选择父级： oSpan.parentNode; //返回一个元素

// var omsg = document.querySelector(".msg"); //第一个子
// console.log(omsg.firstElementChild)

// var omsg = document.querySelector(".msg"); // 最后一个子
// console.log(omsg.lastElementChild)

// var omsg = document.querySelector(".msg"); // 上一个兄弟
// console.log(omsg.previousElementSibling)

// var omsg = document.querySelector(".msg"); // 下一个兄弟
// console.log(omsg.nextElementSibling)；

二、其他节点选择器：（关系）

这里是在HTML中显示的各种其他节点：

<body>
<span>qwe</span>
<div class="box">
<span>1</span>
<p>2</p>
hello

<em>3</em>
</div><span>zxc</span>
</body>

var obox = document.querySelector(".box")   // 父选子 //NodeList(9)注意在这里换行和空格都属于节点，所以显示是显示出box中的所有节点以类数组的形式在控制台中输出；
console.log(obox.childNodes)

var obox = document.querySelector(".box") // 上一个兄弟 //#text
console.log(obox.previousSibling)

var obox = document.querySelector(".box") // 下一个兄弟 // <span>zxc<span>
console.log(obox.nextSibling)

// var obox = document.querySelector(".box")   // 第一个子 //#text
// console.log(obox.firstChild)

// var obox = document.querySelector(".box")   // 最后一个子 //#text
// console.log(obox.lastChild)

三、节点

根据DOM规定，HTML文档中的每个成分都是一个节点。

DOM是这样规定的：

整个文档是一个文档节点

每个HTML标签是一个元素节点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

注释属于注释节点

相当于HTML文档中的所有内容都是节点，元素是节点的别称，节点包含元素，当然节点还有好多细化的种类

如何获取DOM节点：

对象.parentNode //获得父元素节点

对象.children //获得子元素节点的集合，不包含空白节点

//但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点

对象.childNodes //获得所有子节点的集合，包括空白节点

//IE7/8不包含空文本节点，但IE7包含首个注释节点(前面没有元素节点)，IE8包含所有注释节点

如何获取属性节点：

对象.attributes //获得所有属性节点，返回一个数组

四、DOM属性的基本操作（增／删／改／查）

改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)

也就是对DOM进行增删改查。什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等。

可以分为两种，一种叫内置属性，一种叫非内置属性。

内置属性可以直接通过点"."进行操作

tagName //返回值是当前元素的标签名

innerHTML／innerText //返回值是当前元素的内容

id //返回值是当前元素的ID

title //获取title的标签值，这个title是从document中获取的

className //返回值是当前元素的class

href //返回值是当前的href的值

非内置属性需要通过一些节点的方法进行操作，注意：节点的方法，前缀一定是节点

getAttribute() //获取元素的属性

setAttribute() //设置／修改元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值

removeAttribute() //删除元素的属性，低版本的IE不兼容

在这里要注意getAttribute()和对象.attributes 的区分，前者是对元素中属性的获取操作，后者是用来获得对象中所有属性节点的操作，前者是获得所有属性节点，返回一个数组。

五、DOM元素的基本操作（增／删／改／查）

查询：选择器；

创建：createElement() 配合 appendChild() 将创建好的元素，插入到某个标签内的最后

删除：removeChild() 配合 parentNode

元素.remove() 直接删除当前元素

document.body.removeChild(div)；

修改: outerHTML

oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"

posted @ 2019-08-27 13:37 托尔带盐人阅读(1413) 评论(0) 编辑收藏举报

刷新页面返回顶部

托尔带盐人

浅谈DOM的概念和作用

公告