DOM_1
时间：2023-04-02 11:52:42
HTML
DOM基本DOM搜索文档对象模型DOM是一个W3C（万维网联盟）标准，一个平台和语言中立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。对网页进行增删改查操作。DOM标准开发：先用简单的，再用复杂的补充——核心DOMHTMLDOM可以操作所有结构化文档的API，目的是将复杂的API简化。通用不是通用。它既麻烦又简单。常用的DOM操作有查找节点、读取节点信息、修改节点信息、新建节点、删除节点等。常用DOM方法getElementById()getElementsByTagName()getElementsByClassName()appendChild()removeChild()replaceChild()insertBefore()creatAttribute()creatElement()creatTextNode()getAttribute()setAttribute()根据id属性var准确找到一个元素对象elem=document.getElementById("id")非常高效强调：getElementById只能用在文档上When：只用于精确查找元素问题：并非所有元素都有id示例：首页企业介绍联系我们varul=document.getElementById('myList');console.log(ul);Findvarelems=parentbytagname.getElementByTagName("tag")查找指定父节点下所有带tag标签的子节点强调：1.可以用在任何父元素上2.不仅检查直接子节点，还检查所有子节点3.返回一个动态集合即使只取一个元素，也必须用[0]返回集合，取出唯一元素的问题：不仅要找到直接的，还要找到所有子节点。示例：主页公司介绍联系我们varul=document.getElementById('menuList');varlist=ul.getElementByTagName('li');console.log(list);通过name属性找到**document.getElementByName('name属性值')可以返回DOM树中具有指定name属性值的所有子元素的集合。示例：varlist=document.getElementByName('boy');console.log(typeoflist);通过类搜索在父元素下找到指定class属性的元素varelems=parent.getElementByClassName("class")兼容性问题：IE9+例子：NewsTitle1
新闻标题2新闻标题3 vardiv=document.getElementById('news');varlist=div.getElementByClassName('mainTitle');console.log(list);通过css选择器查??找元素选择器类选择器id选择器后代选择器子选择器组选择器只找到一个元素：varelem=parent.querySelector("selector")强调：selector支持css中所有的选择器，如果选择器匹配有多个，只返回第一个查找多个元素：varelem=parent.querySelectorAll("selector")强调：selectorAPI返回一个非动态集合DOM修改和修改属性CoreDOM：四种操作读取属性值：2类型1.获取先属性节点对象，再获取节点对象的值varattrNode=elem.attributes[下标/属性名]varattrNode=elem.getAttributeNode(属性名)attrNode.value—————属性值2.直接获取属性值varvalue=elem.getAttribute("属性名");修改属性值elem.setAttribute("属性名",value);varh1=document.getElementById("a1");h1.setAttributeNode("name",zzx);//获取name修饰内容判断是否包含属性：varbool=elem.hasAttribute("Attributename")//真或假或document.getElementById('bt1').hasAttribute('onclick');//获取id为bt1的元素判断是否有onclick属性移除属性：elem.removeAttribute('属性名')
百度搜索vara=document.getElementById('alink');a.removeAttribute('class');修改样式内联样式：elem.style.Attributename重点：属性名：去掉横线，改成camelCase例如：css:background-color变成backgroundColorlist-style-type变成listStyleTypeDOM添加元素的步骤：1.createemptyelements2.设置关键属性3.向DOM树添加元素创建空元素varelem=document.createElement("elementname")如：vartable=document.createElement('table');vartr=document.createElement('tr');vartd=document.creatElement('td');vartd=document.creatElement('td');console.log(table);设置key属性key属性a.innerHTML="gototmooc"a.href="http://tmooc";gotomooc;keystylea.style.opacity="1";a.style.cssText="宽度:100px;高度:100px";//可以写多个属性给DOM树添加元素parentNode.appendChild(childNode)可以用来给最后一个子节点追加一个父元素creatTextNode('版权声明');div.appendChild(txt);//将txt放入divdocument.body.appendChild(div);//将div放入bodyparentNode.insertBefore(newChild,existingChild)用于在父元素中的指定子节点之前添加一个新的子节点主页联系我们varul=document.getElementById('Menu');varnewLi=document.creatElement('li');ul.insertBefore(newLi,ul.lastChild);添加元素以尽可能少的操作优化DOM树为什么：每次修改DOM树，都会导致重新layout1。如果同时创建父元素和子元素，建议先将子元素添加到内存中的父元素中，然后一次性将父元素挂到页面中。2.如果只添加了多个横向子元素，需要先将所有子元素暂时添加到文档片段中，然后再将文档片段整体添加到页面文档片段中：在内存中，暂时保存的虚拟父元素多个水平子元素，用法和普通父元素完全一样如何：1.创建片段：varfrag=document.creatDocumentFragment();2.临时追加子元素到fragfrag.appendChild(child);3.将frag追加到页面parent.appendChild(frag);强调：append后，frag自动释放，不会占用元素
