css dom名称,关于css:DOM

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

例子：

• 首页
• 企业介绍
• 分割咱们

var ul=document.getElementById('myList');

console.log(ul);

按标签名找

var elems=parent.getElementByTagName(“tag”)

查找指定parent节点下所有标签为tag的子代节点

强调：

1.可用在任意父元素上

2.不仅查间接子节点，而且查所有子代节点

3.返回一个动静汇合

即便只款待一个元素，也返回汇合

必须用[0]，取出惟一元素

问题：岂但找间接，而且找所有子代。

例子：

• 首页
• 企业介绍
• 分割咱们

var ul=document.getElementById('menuList');

var list=ul.getElementByTagName('li');

console.log(list);

通过name属性查找

**document.getElementByName(‘name属性值’)

能够返回DOM树中具备指定name属性值的所有子元素汇合。

例子：

var list=document.getElementByName('boy');

console.log(typeof list);

通过class查找

查找父元素下指定class属性的元素

var elems=parent.getElementByClassName(“class”)

有兼容性问题：IE9+

例子：

新闻标题1

新闻标题2

新闻标题3

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(‘属性名’)

百度搜寻

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)

用于在父元素中指定子节点之前增加一个新得子节点

• 首页
• 分割咱们

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