DOM-属性和CSS

## DOM--属性和CSS **一、属性** HTML元素由一个标签和一组称为属性（attribute）的名/值对组成。 **1、HTML属性作为Element的属性** 表示HTML文档元素的HTMLElement对象定义了读写属性，它们映射了元素的HTML属性。 HTMLElement定义了通用的HTTP属性（如id、标题lang和dir）的属性，以及事件处理程序属性（如onclick）。 特定的Element子类型为其元素定义了特定的属性。例如： ``` var image = document.getElmentById("myimage") var imgurl = image.src //src属性是图片的URL image.id === "myimage" // 判定要查找图片的id ``` 同样的，我们也可以为一个

元素设置表单提交的属性。 ``` var f = document.forms[0]; //文档中的第一个 f.action = "submit.php"; //设置提交的URL f.method = "POST"; //HTTP请求类型 ``` HTML属性名不区分大小写，但是JavaScript属性名则大小写敏感。从HTML属性名转换到JavaScript属性名应该采用小写。但是，如果属性名包含不止一个单词，则除了第一个单词以外的单词的首字母大写，比如：zIndex、backgroundColor 注意：有些HTML属性名在JavaScript中是保留字。比如：HTML的class和for属性，在JavaScript中变为className和htmlFor属性。 **2、获取和设置非标准HTML属性** 元素节点提供四个方法来操作属性。 - getAttribute() //获取属性 - setAttribute() //设置属性 - hasAttribute() //检测属性是否存在 - removeAttribute() //删除属性 **2.1 Element.getAttribute()** getAttribute()方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。 ```

var t = document.getElementById('top'); t.getAttribute('name'); //div ``` **2.2 Element.setAttribute()** setAttribute()方法用于为当前元素节点新增属性。如果属性已经存在，则相当于修改已存在的属性。 ``` t.setAttribute('name','top2'); ``` **2.3 Element.hasAttribute()** hasAttribute()方法返回一个布尔值，表示当前元素节点是否包含指定的属性。 ``` t.hasAttribute('name') //true ``` **2.4 Element.removeAttribute()** removeAttribute()方法用于从当前元素节点移除属性。 ``` t.removeAttribute('name') //

``` **3、数据集（dataset）属性** 在HTML5文档中，任意以“data-”为前缀的小写的属性名字都是合法的。 HTML5还在Element对象上定义了dataset属性。该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性。因此dataset.x应该保存data-x属性的值。带连字符的属性对应于驼峰命名法属性名：data-jquery-test属性就变成dataset.jqueryTest属性。 ```

var t=document.getElementById('top'); t.dataset.tip //title t.dataset.tip = 'title2' ``` 注意：dataset属性是元素的data-属性的实时、双向接口。设置或删除dataset的一个属性就等同于设置或移除对应元素的data-属性。 **4、作为Attr节点的属性** Node类型定义了attributes属性。针对非Element对象的任何节点，该属性为null。对于Element对象，attributes属性是只读的类数组对象，它代表元素的所有属性。类似NodeList，attributes对象也是实时的，它可以用数字索引访问，这意味着可以枚举元素的所有属性。而且，也可以用属性名索引。 ``` document.body.attributes[0] //元素的第一个属性 document.body.attributes.bgcolor // 元素的bgcolor属性 document.body.attributes['ONLOAD'] // 元素的onload属性。 ``` 属性节点对象有name和value属性，对应该属性的属性名和属性值，等同于nodeName属性和nodeValue属性。 ```

var t = document.getElemntById('top'); t.attributes[0].name // "id" t.attributes[0].nodeName // "id" t.attributes[0].value // "top" t.attributes[0].nodeValue // "top" ``` **5、元素的内容** **5.1 作为HTML的元素内容** 读取Element的innerHTML属性作为字符串标记返回那个元素的内容。 ```

内容

var t=document.getElementById('top'); t.innerHTML // 内容 t.innerHTML = '内容2'; //

内容2

``` HTML5还标准化了outerHTML属性。只有Element节点定义了outerHTML属性，Document节点则无。 **insertAdjacentHTML()** 将任意的HTML标记字符串插入到指定的元素“相邻”位置。第一个参数为具有以下值之一的字符串：“beforebegin”、“afterbegin”、“beforeend”和“afterend”。标记是该方法的第二个参数。 **5.2 作为纯文本的元素内容** 标准的方法是用Node的textContent属性： ```

内容

var t = document.getElementById('top'); t.textContent // 内容 ``` textContent属性就是将指定元素的所有后代Text节点简单的串联在一起。 textContent属性在IE中不支持。在IE中，可以用innerText属性来替代。 **5.3 作为Text节点的元素内容** nodeValue属性，保存Text节点的内容。 下面的textContent()函数，它递归地遍历元素的子节点，然后连接后代节点中所有的Text节点的文本。 ``` function textContent(e){ var child,type,s=''; //s保存所有子节点的文本 for(child = e.firstChild; child !=null;child =child.nextSibling){ type = child.nodeType; if(type === 3 || type === 4) //Text和CDATASection节点 { s += child.nodeValue; }else if( type === 1){ s += textContent(child); } return s; } } ``` CDATASection节点，是在XML文档中的，它是Text的子类型，代表了CDATA段的内容。 **二、CSS** 层叠样式表（Cascading Style Sheet，CSS）是一种指定HTML文档视觉表现的标准。 **2.1 脚本化内联样式** 更改单独的文档元素的style属性是脚本化CSS最直接了当的方法。 style属性的值并不是字符串，而是一个CSSStyleDeclaration对象。该style对象的JavaScript属性代表了HTML代码中通过style指定的CSS属性。 ```

var t = document.getElementById('top'); t.style.fontSize = '15px'; t.style.color = 'red'; //或 t.setAttribute('style','background:red;'); ``` 注意：CSSStyleDeclaration对象中的属性名和实际的CSS属性名有所区别。如果一个CSS属性名包含一个或多个连字符，CSSStyleDeclaration属性名的格式应该是移除连字符，将每个连字符后面紧跟着的字母大写。比如：CSS属性border-left-width的值在JavaScript中通过borderLeftWidth属性进行访问。 另外，当一个CSS属性（如float）在JavaScript中对应的名字是保留字时，在之前加“css”前缀来创建合法的CSSStyleDeclaration名字。 `float -- cssFloat` 注意：所有的定位属性都需要包含单位。 ``` t.style.left = 300 //错误 t.style.left = '300px' //正确 ``` style对象的cssText也可以用来读写或删除整个style属性。 ``` t.style.cssText t.style.cssText = 'background:red'; ``` style对象的以下三个方法，用来读写行内CSS规则。 - setProperty(propertyName,value)：设置某个CSS属性。 - getPropertyValue(propertyName)：读取某个CSS属性。 - removeProperty(propertyName)：删除某个CSS属性。 这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。 ``` t.style.setProperty('background-color','red'); t.style.getPropertyValue('background-color'); t.style.removeProperty('background-color'); ``` 上面的方法都是只能读写内联样式（用style来设置），如果要获取引用的样式或者伪元素样式呢？ 这时就要用到window对象的`getComputedStyle()`方法了！ **window.getComputedStyle()** `getComputedStyle()`是浏览器窗口对象的方法，可用来获得一个元素的计算样式。此方法需要两个参数，第一个参数是要获取其计算样式的元素，第二个参数也是必需的，通常是null或空字符串，但它也可以是命名CSS伪对象的字符串，如：“:before”，“:after”，“:first-line”或者“:first-letter”。 `getComputedStyle()`方法返回的是一个CSSStyleDeclaration对象，它代表了应用在指定元素（或伪对象）上的所有样式。 ```

var t = document.getElementById('top'); window.getComputedStyle(t,null).lineHeight //30px window.getComputedStyle(t,':before').content // "before" ``` 此外，还可以用window.getComputedStyle对象的getPropertyValue()方法，获取属性。 ``` window.getComputedStyle(t,null).getPropertyValue('line-height'); //30px，不需使用连字符 ``` 计算样式的CSSStyleDeclaration对象和表示内联样式的对象的区别： - 计算样式的属性是只读的 - 计算样式的值是绝对值。类似百分比和点之类相对的单位将全部转换为绝对值。 - 不计算符合属性，只基于最基础的属性。比如：不要查询margin属性，用marginTop等 - 计算样式的cssText属性未定义。 在IE中，每个HTML有自己的currentStyle属性，它的值也是一个CSSStyleDeclaration对象。 ``` function getStyle(dom, attr) { var value = dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr]; return parseFloat(value); } getStyle(t,'lineHeight'); //30 ``` **2.2 脚本化CSS类** 通过改变或添加HTML的class属性值，也是改变内联style属性的一个方法。 由于标识符class在JavaScript中是保留字，所以HTML属性class在JavaScript代码中使用className的JavaScript代码。 ``` t.className = 'attention'; //设置class属性 t.className += 'attention2'; //添加class属性 t.className = ''; //删除全部class t.className = t.className.replace('attention2',''); //删除名为attention2的class ``` 在HTML5中，每个元素都定义了classList属性，该属性值是DOMTokenList对象：一个只读的类数组对象，它包含元素的单独类名，而且是实时的。它有四个方法： ``` element.classList.add() //添加 element.classList.remove() //删除 element.classList.contains() //是否包含 element.classList.toggle() //如果不存在类名就添加，否则删除 ``` **2.3 脚本化样式表** 在脚本化样式表时，我们会碰到两类需要使用的对象。 第一类是元素对象，由` document.querySelector('#styleElement').sheet //等同于 document.styleSheets[0] ``` 注意：styleSheets数组包含link节点和style的样式表 **2.3.2开启和关闭样式表** `