DOM

Posted 2021-10-05 HUMILITY

DOM基础

DOM查找

document object model
DOM是W3C(万维网联盟）的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容，结构和样式。

对网页进行增删改查的操作。

DOM标准

开发：先用简单的，再用复杂的补充————以实现效果为目的

核心DOM	html DOM
可操作一切结构化文档的API	专门操作HTML文档的简化版DOM API
包括HTML和XML	仅对常用的复杂的API进行了简化
万能	不是万能
繁琐	简单

常用DOM操作
查找节点
读取节点信息
修改节点信息
创建新节点
删除节点

常用DOM方法
getElementById()
getElementsByTagName()
getElementsByClassName()
appendChild()
removeChild()
replaceChild()
inserBefore()
creatAttribute()
creatElement()
creatTextNode()
getAttribute()
setAttribute()

按id属性，精确查找一个元素对象

var elem=document.getElementById("id")
效率非常高
强调：getElementById只能用在document上
何时：只用于精确查找一个元素
问题：不是所有元素都有id

例子：
<ul id="myList">
        <li id="m1">首页</li>
        <li id="m2">企业介绍</li>
        <li id="m3">联系我们</li>
</ul>        
var ul=document.getElementById(\'myList\');
console.log(ul);

按标签名找

var elems=parent.getElementByTagName("tag")
查找指定parent节点下所有标签为tag的子代节点
强调：
1.可用在任意父元素上
2.不仅查直接子节点，而且查所有子代节点
3.返回一个动态集合
即使只招待一个元素，也返回集合
必须用[0]，取出唯一元素
问题：不但找直接，而且找所有子代。

例子：
<ul id="myList">
        <li id="m1">首页</li>
        <li id="m2">企业介绍</li>
        <li id="m3">联系我们</li>
</ul>        
var ul=document.getElementById(\'menuList\');
var list=ul.getElementByTagName(\'li\');
console.log(list);

通过name属性查找

**document.getElementByName(\'name属性值\')
可以返回DOM树中具有指定name属性值的所有子元素集合。

例子：
<form id="registerForm">
        <input type="checkbox"name="boy"/>
        <input type="checkbox"name="boy"/>
        <input type="checkbox"name="boy"/>
</form>

var list=document.getElementByName(\'boy\');
console.log(typeof list);

通过class查找

查找父元素下指定class属性的元素
var elems=parent.getElementByClassName("class")
有兼容性问题：IE9+

例子：
<div id="news">
    <p class="mainTitle">新闻标题1</p>
    <p class="subTitle">新闻标题2</p>
    <p class="mainTitle">新闻标题3</p>
</div>

var div=document.getElementById(\'news\');
var list=div.getElementByClassName(\'mainTitle\');
console.log(list);

通过css选择器查找

元素选择器
类选择器
id选择器
后代选择器
子代选择器
群组选择器

只找一个元素：
var elem=parent.querySelector("selector")
强调：
selector支持一切css中选择器
如果选择器匹配的有多个，只返回第一个

找多个元素：
var elem=parent.querySelectorAll("selector")
强调：
selector API返回的是非动态集合

DOM修改

修改属性核心DOM:四个操作

读取属性值：2种
1.先获取属性节点对象，再获得节点对象的值
var attrNode=elem.attributes[下标/属性名]
var attrNode=elem.getAttributeNode(属性名）

attrNode.value————属性值

2.直接获得属性值
var value=elem.getAttribute("属性名");

修改属性值
elem.setAttribute("属性名",value);

var h1=document.getElementById("a1");
h1.setAttributeNode("name",zzx);
//获取到名字修改内容

判断是否包含之中的属性：
var bool=elem.hasAttribute("属性名") //ture或false
或
document.getElementById(\'bt1\').hasAttribute(\'onclick\'); //获取id为bt1的元素判断有无onclick属性

移除属性：
elem.removeAttribute(\'属性名\')

<a id="alink"class="slink"href="javascript:void(0)"onclick="jump()">百度搜索</a>
var a=document.getElementById(\'alink\');
a.removeAttribute(\'class\');

修改样式
内联样式：elem.style.属性名
强调：属性名：去横线，变驼峰
比如：
css：
background-color
变为
backgroundColor

list-style-type
变为
listStyleType

DOM添加

添加元素的步骤：
1.创建空元素
2.设置关键属性
3.将元素添加到DOM树

创建空元素

var elem=document.creatElement("元素名"）
如：
var table=document.creatElement(\'table\');
var tr=document.creatElement(\'tr\');
var td=document.creatElement(\'td\');
var td=document.creatElement(\'td\');

console.log(table);

设置关键属性

关键属性
a.innerHTML="go to tmooc"
a.href="http://tmooc";
go to mooc;
关键样式
a.style.opacity="1";
a.style.cssText="width:100px;height:100px"; //可写多个属性

将元素添加到DOM树

parentNode.appendChild(childNode)
可用于将一个父元素追加最后一个子节点

var div = document.creatElement(\'div\');
var txt = document.creatTextNode(\'版权声明\');

div.appendChild(txt);  //将txt放在div里
document.body.appendChild(div);  //将div放在body里面

parentNode.insertBefore(newChild,existingChild)
用于在父元素中指定子节点之前添加一个新得子节点

<ul id="menu">
    <li>首页</li>
    <li>联系我们</li>
</ul>

var ul=document.getElementById(\'Menu\');
var newLi=document.creatElement(\'li\');

ul.insertBefore(newLi,ul.lastChild);

添加元素优化

尽量少的操作DOM树
为什么：每次修改DOM树，都导致重新layout
1.如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面
2.如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中，再将文档片段整体添加到页面
文档片段：内存中，临时保存多个平级子元素的虚拟父元素，用法和普通父元素完全一样
如何：
1.创建片段：
var frag=document.creatDocumentFragment();
2.将子元素临时追加到frag中
frag.appendChild(child);
3.将frag追加到页面
parent.appendChild(frag);
强调：append之后，frag自动释放，不会占用元素