文档中的元素都是Element类型的对象
Element类型的对象，通过原型继承自Node.prototype。
所以，Node类型是Element类型的父类型
Node类型定义的属性和方法，所有Element对象都具备：
比如：nodeName，nodeType，nodeValue
再比如：firstChild，lastChild，childNodes等
Element类型，除从Node类型继承了所有节点公共的属性和方法外，还扩展了专门操作元素节点的属性和方法
元素节点与普通节点的不同，是元素节点可以有特性(Attribute)和内容(innerHTML)
由Element类型提供的所有元素对象共有的属性和方法，也称为核心DOM
核心DOM和HTMLDOM
在HTML文档中，，所有和HTML元素又是HTMLElement类型的对象，是Element的子类型，所以，Element类型提供的属性和方法，HTML元素都可以使用。
扩展简化
id title style className
HTML内容获取和设置
<p id="msg"><span>新华社消息</span> </p>
var p=document.getElementById("msg");
console.log(p.innerHTML) //读取
console.log(typeOf p.innerHTML) //String类型
p.innerHTML=<a>央视新闻</a> //设置
textContent用于读取或者设置元素节点中的文本内容 //子HTML标签会被剔除
<p id="msg"><span>新华社消息</span></p>
document.getElementById("msg");
console.log(p.textContent); //读取
console.log(typeOf p.textContent); //String
p.textContent="来自央视的新闻" //设置 IE8版本以下不支持textContent
nodeValue和textContent
元素的属性
读取属性 可以通过以下几种方法读取元素属性值
element.attributes[下标].value
element.attributes["属性名"]
element.getAttribute("属性名")
element.getAttribute("属性名").value
修改属性
element.setAttribute(name,value) //IE8版本以下不支持
element.setAttributeNode(attrNode);
移除属性
element.removeAttribute("属性名")
element.removeAttributeNode9(attrNode);
判断属性
element.hasAttribute('属性名') //判断 是否拥有该属性 返回ture或者false
element.hasAttribute() //判断是否拥有属性
元素的样式
HTML中定义样式，三种方法：1. 内联样式： style=“xxx:xxx;xxx:xxx…”2. 内部样式表：3. 外部样式表：
属性名：style对象中的属性名都是将CSS中样式属性名去横线，变驼峰后的结果，比如：
CSS中： background-color 、 list-style-type
style对象中：backgroundColor 、listStyleType
获取或设置元素的内联样式
获取 elem.style.属性名 //所有属性返回字符串类型
设置 elem.style.属性名=值 //值也是字符串类型
强调：在浏览器标准模式下，带单位的属性值设置时，必须加单位，取值时也会返回带单位的值。
如何获取到最终影响多大当前元素的所有样式属性？
DOM：[document.defautView.]getComputeStyle(元素对象)
IE：对象元素.currentStyle属性
返回的结果都是CSSStyleDeclaration对象。
读取属性时和style对象一样，但不能改！
只能通过元素.style.属性名方式，设置内联样式，利用优先级高的特点，覆盖其它样式表中的样式。
修改样式表中的样式
第一步：现获取包含属性的样式表对象
var sheet=document.styleSheet[i];
第二步：获取样式表中所有规则的集合
var rules=sheet.cssRules//sheet.rules;
第三步：获取规则集合中包含目标属性的规则
var rule=rules[i];
获取或设置规则集合中的目标属性
rule.style.属性名
网友评论