JS基础知识（九）：DOM

最新推荐文章于 2024-08-28 19:01:32 发布

橘子味的香蕉

最新推荐文章于 2024-08-28 19:01:32 发布

阅读量430

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44706267/article/details/121202175

版权

JavaScript 专栏收录该内容

26 篇文章 14 订阅

订阅专栏

文章目录

一、DOM
二、DOM节点

一、DOM

文档对象模型DOM（document Object Model），是 W3C（万维网联盟）的标准
DOM 定义了访问 HTML 和 XML 文档的标准：
W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构称为节点组成的节点树。

二、DOM节点

元素结点、属性节点、文本节点
< div title=“属性节点”>测试 Div</ div>

2.1 查找元素节点

W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getElementsClassName()、getAttribute()、 setAttribute()和 removeAttribute()。

getElementById()方法，接受一个参数：获取元素的 ID。如果找到相应的元素则返回该元素的 HTMLDivElement 对象，如果不存在，则返回 null

getElementsByTagName()方法将返回一个类数组——s：可以获取批量结点
HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。

document.getElementsByTagName('li'); //获取所有 li 元素，返回数组 
document.getElementsByTagName('li')[0]; //获取第一个 li 元素
document.getElementsByTagName('li').item(0) //获取第一个 li 元素，HTMLElement
document.getElementsByTagName('li').length; //获取所有 li 元素的数目
//获取ol下的li：oo=document.getElementsById（ol）oo. getElementsByTagName('li')
//PS：不管是 getElementById 还是 getElementsByTagName，在传递参数的时候，并不是 所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。

getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组 HTMLCollection(NodeList)。
document.getElementsByName(‘add’) //获取 input 元素
document.getElementsByName(‘add’)[0].value //获取 input 元素的 value 值
一般只有input会用到name
PS:可以获取到具有属性name并name相同的不同元素节点,但是一定要注意该元素节点是否支持name属性。

IE8以下该方法无法使用。
getElementsByClassName(class名字)方法——使用方法同getElementsByTagName
ol下li：oo=document.getElementsById（ol）
oo. getElementsByClassName(‘box’)

document.querySelector(CSS selectors)
参数 CSS 选择器
类型 String
指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。ol .box ol中的box结点 ,“[name=hello]”
对于多个选择器，使用逗号隔开，返回一个匹配的元素。

getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。
区别：
对于class的访问，使用.属性访问，由于class是关键字，所以要用className
getAttribute传递的参数是字符串，可以直接传入class

document.getElementById('box').getAttribute('id');//获取元素的 id 值 
document.getElementById('box').id;           //获取元素的 id 值
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv;          //获取元素的自定义属性值
document.getElementById('box').getAttribute('class');//获取元素的 class 值
document.getElementById('box').getAttribute('className');

setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。
document.getElementById(‘box’).setAttribute(‘align’,‘center’);//设置属性和值
document.getElementById(‘box’).setAttribute(‘bbb’,‘ccc’);//设置自定义的属性和值

removeAttribute() 可以移除 HTML 属性
如果是.属性，只能通过设置为空字符串，并非真正的删除
document.getElementById(‘box’).removeAttribute(‘style’);//移除属性

2.2 元素节点属性

当我们通过 getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。
document.getElementById(‘box’).tagName; //DIV
document.getElementById(‘box’).innerHTML; //测试 Div

PS：不同类型节点的属性

innerHTML和nodeValue的区别
nodeValue：节点的值，只有属性节点和文本节点有，元素节点没有值
innerHTML：以字符串形式返回该节点的所有子节点及其值
PS：在获取到文本节点的时候，是无法使用 innerHTML 这个属性输出文本内容的。
innerHTML 和 nodeValue 第一个区别，就是取值。
第二个区别就是赋值的时候，nodeValue 会把包含在文本里的 HTML 转义成特殊字符，从而达到形成单纯文本的效果。
box.childNodes[0].nodeValue=’< strong>abc</ strong>’;
//结果为：< strong>abc</ strong>
box.innerHTML=’< strong>abc</ strong>’;
//结果为：abc 加粗

document.getElementById('box').id;            //获取 id 
document.getElementById('box').id='person';   //设置 id
document.getElementById('box').title;         //获取 title 
document.getElementById('box').title='标题'   //设置 title
document.getElementById('box').style;         //获取 CSSStyleDeclaration 对象 
document.getElementById('box').style.color;   //获取 style 对象中 color 的值 document.getElementById('box').style.color='red'; //设置 style 对象中 color 
document.getElementById('box').className;     //获取 class 
document.getElementById('box').className='box'; //设置 class
alert(document.getElementById('box').bbb);   //获取自定义属性的值,不支持
//如果style中的属性有-，去掉-，从第二个单词首字母大写
//.style.color：只能访问标签行间的CSS样式

2.3 元素节点

2.3.1 childeNodes

childeNodes 属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点。（不包含属性子节点）
var box=document.getElementById(‘box’); //获取一个元素节点
alert(box.childNodes.length); //获取这个元素节点的所有子节点
alert(box.childNodes[0]); //获取第一个子节点对象

PS：使用 childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如 HTMLElement；也有可能返回的是文本子节点，比如 Text。元素子节点可以使用 nodeName 或者 tagName 获取标签名称，而文本子节点可以使用 nodeValue 获取。

2.3.2 firstChild和lastChild属性

childNodes访问当前节点下的所有子节点
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；
lastChild 用于获取当前元素节点的最后一个子节点，相当于 childNodes[box.childNodes.length- 1]。

2.3.3 parentNode、previousSibling、nextSibling和ownerDocument

ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document
alert(box.ownerDocument=== document); //true，根节点
parentNode、previousSibling、nextSibling 属性
parentNode //属性返回该节点的父节点，
previousSibling //属性返回该节点的前一个同级节点，
nextSibling //属性返回该节点的后一个同级节点。

2.3.4 children、firstElementChild、firstElementChild、nextElementtSibling、previousElementSibling

由于空格、回车、换行都是字符，使用childNodes被当做文本节点
通过children、firstElementChild、firstElementChild、nextElementtSibling、previousElementSibling只获取子节点中的元素节点。

2.3.5 attributes属性(了解)

attributes 属性返回该节点的属性节点集合（无序，不重复）。

box.attributes           //NamedNodeMap：属性节点集合
box.attributes.length;         //返回属性节点个数
box.attributes[0];            //Attr，返回最后一个属性节点
box.attributes[0].nodeType;      //2，节点类型
box.attributes[0].nodeValue;      //属性值
box.attributes['id'];         //Attr，返回属性为 id 的节点
box.attributes.getNamedItem('id'); //Attr

2.3.6 忽略空白节点

var body= document.getElementsByTagName('body')[0];//获取 body 元素节点
alert(body.childNodes.length); //得到子节点个数，
PS：在非 IE 中，标准的 DOM 具有识别空白文本节点的功能，所以在火狐浏览器是 7 个，而 IE 自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。
方法1：
function filterSpaceNode(nodes){
	var ret=[]; //新数组
	for(vari=0;i<nodes.length;i++) {
		//如果识别到空白文本节点，就不添加数组
		if(nodes[i].nodeType== 3&&/^\s+$/.test(nodes[i].nodeValue))
		continue; //把每次的元素节点，添加到数组里 ret.push(nodes[i]);
	}
	return ret;
}
PS：上面的方法，采用的忽略空白文件节点的方法，把得到元素节点累加到数组里返 回。那么还有一种做法是，直接删除空位文件节点即可

方法2：
function filterSpaceNode(nodes){
	for(vari=0;i<nodes.length;i++) {
		if(nodes[i].nodeType== 3&&/^\s+$/.test(nodes[i].nodeValue)){
//得到空白节点之后，移到父节点上，删除子节点				  			    nodes[i].parentNode.removeChild(nodes[i]);
		}
	}
	return nodes;
}

2.3.7 节点的增删改查

在这里插入图片描述

write()方法
write()方法可以把任意字符串插入到文档中去
document.write(’< p>这是一个段落！</ p>’)’; //输出任意字符串

createElement()方法
createElement()方法可以创建一个元素节点。
document.createElement(‘p’); //创建一个元素节

appendChild()方法
appendChild()方法将一个新节点添加到某个节点的子节点列表的末尾上

var box=document.getElementById('box'); //获取某一个元素节点
var p=document.createElement('p'); //创建一个新元素节点<p>
p.appendChild(text)//将文本插入到段落p中，不解析标签
box.appendChild(p); //把新元素节点<p>添加子节点末尾

createTextNode()方法创建一个文本节点
var text =document.createTextNode(‘段落’); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾,

insertBefore()方法可以把节点创建到指定节点的前面
box.parentNode.insertBefore(p,box); //把< div >之前创建一个节点
document.body.insertBefore(p,box);//把p插入到box前面，body为box父亲
PS：insertBefore()方法可以给当前元素的前面创建一个节点，但却没有提供给当前元素的后面创建一个节点。那么，我们可以用已有的知识创建一个 insertAfter()函数。

replaceChild()方法可以把节点替换成指定的节点
box.parentNode.replaceChild(p,box); //把< div>换成了< p>

cloneNode()//方法可以把子节点复制出来
var box=document.getElementById(‘box’);
var clone=box.firstChild.cloneNode(true);
//获取第一个子节点，true 表示复制内容(全部复制) ,false表示只赋值标签
box.appendChild(clone); //添加到子节点列表末尾