关于css:DOM

DOM根底

DOM查找

document object model
DOM是W3C(万维网联盟）的规范，是中立于平台和语言的接口，它容许程序和脚本动静地拜访和更新文档的内容，构造和款式。

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

DOM规范

开发：先用简略的，再用简单的补充————以实现成果为目标

罕用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主动开释，不会占用元素