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