DOM(文档对象模型)的常用操作

2023-10-15 03:57| 来源: 网络整理| 查看: 265

DOM的常用操作

DOM的全称是Document Object Model，即文档对象模型。简单来说 DOM就是整个HTML的内容。

DOM操作就是用js控制HTML中的标签。

目录 DOM的常用操作一、查找DOM二、新建DOM、添加DOM三、删除DOM四、修改DOM五、克隆DOM

一、查找DOM document.getElementById('id名');//返回指定的id对象 document.getElementsByClassName('class名')[下标];//返回指定下标的class对象 document.getElementsByTagName('标签')[下标];//返回指定下标的标签对象 document.getElementsByName('Name属性值')[下标];//返回指定下标的Name对象 document.querySelector('选择器');//返回指定的第一个选择器对象 document.querySeletorAll('选择器')[下标];//返回指定下标的选择器对象 document.documentElement;//返回整个HTML标签，包含其他元素 document.body;//返回页面中的body标签 document.all[下标];//返回指定下标的标签对象 element.getAttributeNode("属性名");//返回指定节点中的属性节点

1.document.getElementById(‘id名’);//返回指定的id对象

HelloWorld let titled=document.getElementById('headline'); console.log(titled); //输出 HelloWorld

2.document.getElementsByClassName(‘class名’)[下标];

HelloWorld Hi let titled=document.getElementsByClassName('headline'); console.log(titled); //输出 HTMLCollection(2) [h1.headline(第一个h1标签), h1.headline(第二个h1标签)] //document.getElementsByClassName('headline')[0];指的是第一个h1标签 //document.getElementsByClassName('headline')[1];指的是第二个h1标签

document.getElementsByTagName(‘标签’)[下标];

HelloWorld Hi let titled=document.getElementsByTagName('h1'); console.log(titled); //输出 HTMLCollection(2) [h1(第一个h1标签), h1(第二个h1标签)] //document.getElementsByTagName('h1')[0];指的是第一个h1 //document.getElementsByTagName('h1')[1];指的是第二个h1

document.getElementsByName(‘Name属性值’)[下标];

HelloWorld Hi let titled=document.getElementsByName('titled'); console.log(titled); //输出 NodeList(2) [h1(第一个h1标签), h1(第二个h1标签)] //document.getElementsByName('titled')[0];指的是第一个h1标签 //document.getElementsByName('titled')[1];指的是第二个h1标签

document.querySelector(‘选择器’);//返回指定的第一个选择器对象

HelloWorld Hi let titled=document.querySelector('h1'); console.log(titled); //输出 HelloWorld

document.querySeletorAll(‘选择器’)[下标];//返回指定下标的选择器对象

HelloWorld Hi let titled=document.querySelectorAll('h1'); console.log(titled); //输出 NodeList(2) [h1(第一个h1标签), h1(第二个h1标签)]

document.documentElement;//返回整个HTML标签，包含其他元素

HelloWorld Hi console.log(document.documentElement); //输出整个HTML文档

document.body;//返回页面中的body标签

HelloWorld Hi console.log(document.body); //输出标签，包含标签内的其他标签

document.all[下标];//返回指定下标的标签对象

Document HelloWorld Hi console.log(document.all[5]); //输出标签 //按照这个文档 //document.all[0];指的是标签 //document.all[1];指的是标签 //document.all[2];指的是标签 //document.all[3];指的是 //document.all[4];指的是标签二、新建DOM、添加DOM

新建DOM

document.createElement('元素名');//创建指定的元素 document.createAttribute('属性名');//创建属性节点 document.createTextNode('文本节点');//创建文本节点 document.createComment('注释节点');//创建注释节点 document.createDocumentFtagment();//创建文档片段节点

添加DOM

parentNode.appendChild(newNode);//向父节点中添加子节点 parentNode.insertBefore(newNode,existingNode);//向父节点中的子节点前添加新子节点 element.setAttributeNode(attribute);//指定元素添加属性节点 element.setAttribute(attributeName,attributeValue);//给指定元素添加属性名，并设置属性值

DOM的创建与添加一起使用

document.createElement(‘元素名’);//创建指定的元素 document.createTextNode(‘文本节点’);//创建文本节点

创建节点 document.getElementsByTagName('button')[0].onclick = function(){ let h1=document.createElement('h1'); let text=document.createTextNode("Hello"); h1.appendChild(text); document.body.appendChild(h1); //点击button创建节点 }

document.createAttribute(‘属性名’);//创建属性节点 element.setAttributeNode(attribute);//指定元素添加属性节点

创建节点 Hello document.getElementsByTagName('button')[0].onclick = function(){ let h1=document.getElementsByTagName('h1')[0]; let att=document.createAttribute("name"); att.nodeValue="newNode"; h1.setAttributeNode(att); //点击button，为h1标签创建name属性 }

document.createComment(‘注释节点’);//创建注释节点

创建节点 document.getElementsByTagName('button')[0].onclick = function(){ let com=document.createComment('注释节点'); document.body.appendChild(com); //点击button创建注释节点 }

document.createDocumentFtagment();//创建文档片段节点

创建节点 document.getElementsByTagName('button')[0].onclick = function(){ let com=document.createDocumentFragment(); let text=document.createTextNode("Hello"); com.appendChild(text); document.body.appendChild(com); //点击button创建虚拟的节点对象 }

createDocumentFragment()方法，是用来创建一个虚拟的节点对象。DocumentFragment节点不属于文档树，继承的parentNode属性总是null。

三、删除DOM parentNode.removeChild(子节点);//删除父节点中指定的子节点，返回值为删除的子节点。 element.removeAttribute("属性名");//删除节点中指定属性名的节点,无返回值。 element.removeAttributeNode("属性名");//删除节点中指定属性名的节点，返回值为删除的属性。

parentNode.removeChild(子节点);//删除父节点中指定的子节点，返回值为删除的子节点。

删除节点 document.getElementsByTagName('button')[0].onclick = function(){ let btn=document.getElementsByTagName('button')[0]; let remove=document.body.removeChild(btn); console.log(remove); //输出创建节点 }

element.removeAttribute(“属性名”);//删除节点中指定属性名的节点,无返回值。

删除节点 document.getElementsByTagName('button')[0].onclick = function(){ let btn=document.getElementsByTagName('button')[0]; btn.removeAttribute('name'); //点击button删除name属性 }

element.removeAttributeNode(“属性名”);//删除节点中指定属性名的节点，返回值为删除的属性。

删除节点 document.getElementsByTagName('button')[0].onclick = function(){ let btn=document.getElementsByTagName('button')[0]; let att=btn.getAttributeNode("name"); let remove=btn.removeAttributeNode(att); console.log(remove); //输出 name="button" } 四、修改DOM parentNode.replace(newNode,existingNode);//替换父节点中的子节点 element.setAttribute(attributeName，attributeValue);//修改指定节点中的属性节点

parentNode.replace(newNode,existingNode);//替换父节点中的子节点

修改节点 document.getElementsByTagName('button')[0].onclick = function(){ let btn=document.getElementsByTagName('button')[0]; let h1=document.createElement('h1'); let text=document.createTextNode("新的节点"); h1.appendChild(text); document.body.replaceChild(h1,btn); //点击替换button节点 } 五、克隆DOM element.cloneNode(true/false);//返回克隆的节点

true——克隆标签节点和节点的属性(深拷贝) false——只克隆节点的标签(浅拷贝)

删除节点 document.getElementsByTagName('button')[0].onclick = function(){ let btn=document.getElementsByTagName('button')[0]; let cloneNode=btn.cloneNode(true); document.body.appendChild(cloneNode); }

【本文地址】

公司简介

联系我们