JS-DOM基本概念

mac2024-05-29 39

文章目录

认识DOMDOM_byid元素节点属性DOM_bytagnameDOM_bynameDOM_byclassnameDOM_获取当前样式DOM_封装函数DOM_attribute方法DOM_元素节点属性DOM_删除空白节点DOM_元素节点属性和attributesDOM_创建带文本的元素节点DOM_insertbeforeDOM_元素节点操作方法

认识DOM

DOM document object model 文档对象模型 html css 页面内容 js 页面行为操作【注】DOM是打通html,css和js壁垒的一个工具 DOM种节点属性一共有三种【注】在js种所有节点都是对象

<div title="属性节点">测试Div</div>

元素节点 <div ></div> 属性节点 title="属性节点" 文本节点测试Div

DOM_byid元素节点属性

在获取class，不能直接class，必须使用className。在style样式中，使用-链接的属性，访问的时候需要将-去掉，然后将后续的单词的首字母大写。如：alert("div.style.backgroundColor");

DOM_bytagname

document.getElementsByTagName() node.getElementByTagName() 【注】从node节点开始，找出所有符合条件的元素节点参数：标签名功能：获取当前页面上所有符合该标签名标准的元素节点返回值：一个装有符合条件的元素节点的数组

DOM_byname

document.getElementsByName() 参数：name的值返回值：一个装有符合条件的元素节点的数组【注】name属性一般情况下，只有文本输入框的元素节点才有

DOM_byclassname

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* node.getElementsByClassName() 功能：获取node节点下，所有符合条件的元素节点参数：class 返回值：所有符合条件的元素节点组成的数组【注】getElementByClassName在低版本IE浏览器不支持 */ window.onload = function(){ var nodes = document.getElementsByClassName("box"); //alert(nodes); //[object HTMLCollection] //获取ul下的class为box的元素节点 var oUl = document.getElementById("ul1"); var nodes = oUl.getElementsByClassName("box") for (var i = 0; i < nodes.length; i++) { alert(nodes[i].innerHTML); } } /* 封装函数，封装一个兼容的方法 *通配符任意类型的元素节点 */ function elementByClassName(parent, classStr){ //<1>找到parent下所有的元素节点 var nodes = parent.getElementsByTagName("*") var result = [];//用记录符合条件的元素节点 for (var i = 0; i < nodes.length; i++) { //<2>如果符合条件，添加到数组中 if (nodes[i].className == classStr) { result.push(node[i]); } } return result; } </script> </head> <body> <ul id = "ul1"> <li>111111</li> <li class = "box">222222</li> <li>333333</li> <li class = "box">444444</li> </ul> <ol id = "ol1"> <li class = "box">555555</li> <li>555555</li> <li class = "box">555555</li> <li>555555</li> </ol> </body> </html>

DOM_获取当前样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1{ background-color: red; width: 300px; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); //alert(oDiv.style.width); //alert(oDiv.style.backgroundColor); //【注】我们通过上述操作，只能找到行间的css样式。 /* 获取当前有效样式 getComputedStyle(元素节点)[获取样式类型]; 火狐/谷歌/safari支持元素节点.currentStyle[获取样式类型]； IE 【注】浏览器兼容 */ alert(getComputedStyle(oDiv)["width"]); } //获取当前样式兼容函数 function getStyle(elem, attr){ return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr]; } </script> </head> <body> <div id="div1" style="height: 300px"></div> </body> </html>

DOM_封装函数

<<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* id document.getElementById() tagName node.getElementsByTagName() name document.getElementsByName() className document.getElementsByClassName() */ /* 通过封装函数简化上述的操作封装一个函数，可以拥有上述几种获取元素节点的功能【注】css选择器 #id 通过id获取元素节点 .class 通过classNmae获取元素节点 tagName 通过tanName获取元素节点 name=xxx 通过name获取元素节点 */ function $(vArg){ //<1>对参数进行区分 swith(vArg[0]){ case "#"://id return document.getElementById(vArg.substring(1));//从1开始提取，即除去# break; case "."://clsssName return elementByClassName(document, vArg.substring(1)); break; default: //对参数的前五个字符，进行判断 var str = vArg.substring(0, 5); if(str == "name="){ return document.getElementsByClassName(vArg.substring(5)); }else{//tagNmae return document.getElementsByTagName(vArg); } break; } } //封装函数，封装一个兼容的方法-document.getElementsByClassName() function elementByClassName(parent, classStr){ //<1>找到parent下所有的元素节点 var nodes = parent.getElementsByTagName("*") var result = [];//用记录符合条件的元素节点 for (var i = 0; i < nodes.length; i++) { //<2>如果符合条件，添加到数组中 if (nodes[i].className == classStr) { result.push(node[i]); } } return result; } //调用 window.onload = function(){ //id //alert($("#div1").innerHTML); //className //alert($(".box")[1].innerHTML); //tagName //alert($("div").length); //name //alert($("name = hello")[0].innerHTML); } </script> </head> <body> <div id = "div1">1111111</div> <div class = "box">2222222</div> <div class = "box">3333333</div> <div name = "hello">4444444</div> </body> </html>

DOM_attribute方法

<<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* set/getAttribute() removeAttrite() 【注】都是操作当前元素节点中某个属性的。 */ window.onload = function(){ var oDiv = document.getElementById("div1"); /*alert("oDiv.title"); alert("oDiv.className");*/ //alert(oDiv.getAttribute("title")); /*oDiv.title = "xxx"; oDiv.className = "box3";*/ oDiv.setAttribute("title", "xxx"); /* 上述两种方式的区别 <1>class属性范围区别，点操作是通过className,而set/getAttribute()是通过class <2>set/getAttribute()是用户自定义属性支持 <3>removeAttrite(),可以移除元素，点操作只能设为"" */ } </script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body> </html>

DOM_元素节点属性

<<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* childNodes 获取前元素节点的所有是子节点,包括两种节点类型 1、元素节点 2、文本节点 */ window.onload = function(){ var oDiv = document.getElementById("div1"); //object NodeList 装有当前元素节点所有的子节点 //alert(oDiv.childNodes.length); /* DOM节点类型元素节点文本节点属性节点【注】这些节点又有三个非常有用的属性，分别是：nodeName,nodeType和nodeValue */ /* alert(oDiv.childNodes[0].nodeName);//EM alert(oDiv.childNodes[0].nodeType);//1 alert(oDiv.childNodes[0].nodeValue);//null */ /* alert(oDiv.childNodes[1].nodeName);//#text alert(oDiv.childNodes[1].nodeType);//3 alert(oDiv.childNodes[1].nodeValue);//文本内容 */ /* firstChild 快速找到当前元素节点子节点的第一个 lastChild 快速找到当前元素节点子节点的最后一个 */ } </script> </head> <body> <div id="div1"><em>斜体</em>文本内容<strong>粗体</strong></div> </body> </html>

DOM_删除空白节点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* 包括回车换行 tab键空格字符可以是文本节点 */ window.onload = function(){ var oDiv = document.getElementById("div1"); //alert(oDiv.childNodes.length); //5.原来是3 /* 【问题】如何将空白节点取出【注】识别出空白节点 /^\s+$/.test() 使用左侧的正则去验证，如果是空白节点，返回true，否则返回false */ /* alert(oDiv.childNodes.length);//删除空白节点函数执行前。节点5个 var nodes = removeSpaceNode(oDiv.childNodes); alert(nodes.length);//执行后。节点3个但这样空白节点还是存在，没有被删除，只是非空白节点放在了一个数组里 */ /* 使用firstChild lastChild 必须从父节点上删除空白节点 */ removeSpaceNode2(oDiv); alert(oDiv.childNodes.length); alert(oDiv.firstChild.nodeName); //【注】删除数组元素的时候，必须倒序删除。正序删除时，会跳过删除元素的后一个的判断 } function removeSpaceNode2(parent){ var nodes = parent.childNodes;//提出所有子节点 for (var i = nodes.length - 1; i >= 0; i--) { if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) { //倒着删除改空白节点 parent.removeChild(nodes[i]); } } } //删除空白节点 function removeSpaceNode(nodes){ var result = []; //用来存放不是空白节点的节点的 for (var i = 0; i < nodes.length; i++) { //判断是否是空白节点,先要是3文本节点，在判断是否是空白节点 if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) { continue; } result.push(nodes[i]); } return result; } </script> </head> <body> <div id="div1"> <em>斜体</em> 文本内容 <strong>粗体</strong> </div> </body> </html>

DOM_元素节点属性和attributes

使用前记得删去空白节点，封装函数如上节的removeSpaceNode2(parent)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* 属性节点 attribute属性返回该节点的属性节点【集合】集合特点：1.不重复 2.无序属性 attributes.length 返回属性节点的个数 */ window.onload = function(){ var oDiv = document.getElementById("div1"); //alert(oDiv.attributes); //[object NamedNodeMap] //alert(oDiv.length);//4 //访问其中一个属性节点 /* alert(oDiv.attributes.getNamedItem("id"));//[object Attr] alert(oDiv.attributes["id"]); */ /* 属性节点 nodeName nodeType nodeValue 属性名类型值 */ alert(oDiv.attributes["id"].nodeName); alert(oDiv.attributes["id"].nodeType); alert(oDiv.attributes["id"].nodeValue); } </script> </head> <body> <div id="div1" title="hello" name="world" class="box"></div> </body> </html>

DOM_创建带文本的元素节点

【注】document.Write()在添加内容的时候，会将原有页面上的内容覆盖掉。

/* createElement() 【格式】document.createElement(标签名)； appendChild() 【格式】parent.appendChild(newNode) 【功能】将newNode插入到parent子节点的末尾。 createTextNode() 【格式】document.createTextNode(文本) 【功能】创建文本节点 */ /* 【注】创建一个带文本的元素节点呢？ */ function creatElementWithTxt(tagName, txt){ var node = document.createElement(tagName); var oTxt = document.createTextNode(txt); node.appendChild(oTxt) return node; }

DOM_insertbefore

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* insertBefore() 【格式】父节点，insertBefore(插入的节点，旧节点)；【功能】将插入的节点插入到旧节点之前 */ window.onload = function(){ //创建一个<strong>将这个节点插入到span节点之前 //<1>创建strong var node = creatElementWithTxt("strong", "strong文本"); var oSpan = document.getElementsByTagName("span")[0]; //<2>进行插入 oSpan.parentNode.insertBefore(node, oSpan); } function creatElementWithTxt(tagName, txt){ var node = document.createElement(tagName); var oTxt = document.createTextNode(txt); node.appendChild(oTxt) return node; } /* DOM里insertAfter()这个方法是没有的 */ function insertAfter(newNode, oldNode){ //判读oldNode是否是最后一个节点 var parent = oldNode.parentNode; if (oldNode == parent.lastChild) { //最后一个节点，直接插入到子节点的末尾 parent.appendChild(newNode); }else{ //插入到oldNode的下一个节点之前 parent,insertBefore(newNode, oldNode.nextSibling) //nextSibling 属性返回该节点的最后一个节点 } } </script> </head> <body> <div id="div1"> <p>p</p> <span>span</span> <em>em</em> </div> </body> </html>

DOM_元素节点操作方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /* replaceChild() 【格式】parent.replaceChild(newNode, oldNode); 【功能】用newNode将oldNode给替换掉 cloneNode() 【格式】node.cloneNode() 【返回值】新克隆出来的节点【参数】true 默认是false 如果传true，就会复制元素节点中的innerHTML removeChild() 【格式】node.parentNode.removeChild(node); 【功能】删除节点 */ window.onload = function(){ /*var oDiv = document.getElementById("div1"); var node = document.createElement("strong"); oDiv.parentNode.replaceChild(node, oDiv);*/ var oDiv = document.getElementById({"div1"}); var oSpan = document.getElementByTagName("span")[0]; var node = oDiv.cloneNode(); //将div添加到span节点的前面 oSpan.parentNode.insertBefore(node, oSpan); } </script> </head> <body> <span>span</span> <div id="div1">div</div> <p>p</p> </body> </html>

最新回复(0)