元素自定义属性的获取、设置和移除
- 获取:setAttribute
- 设置:getAttribute
- 移除:
- 设置元素的className==''(此方式只能将元素的属性的值设置为空，属性还在)
- removeAttribute(清除属性)
- 试一试
- 自定义tab栏切换(代码地址：)
- 表格隔行变色
节点
认识节点
-
html文档中所有的内容都叫节点 |nodeType |节点的类型 | | -----| ---- | |1 |元素节点| |2 |属性节点| |3 |文本节点|
-
nodeName 节点的名称(标签名称)
-
nodeValue 节点值
-
元素节点的nodeValue始终是null +当一个标签中有很多相同标签的时候可以直接通过getElementByTagName来获取，但是如果都是不同的标签该如何获取?
- 通过获取节点的方式更方便
-
文档(Document)：就是指HTML或者XML文件
-
节点(Node)：HTML文档中的所有内容都可以称之为节点(元素,文本,属性)
-
元素(Element)：HTML文档中的标签可以称为元素,元素称为对象
-
文档元素(根元素)：文档中的第一个元素，HTML文档元素就是<html>
节点的层次
-
父节点 parentNode
-
子节点
- childNodes IE8中会忽略空白节点，
- children 返回元素节点非标准的dom方法,所有浏览器都支持，但是只获取元素节点
-
兄弟节点 nextSibling,previousSibling
-
第一个和最后一个子节点 firstChild,lastChild
-
注意：firstElementChild,lastElementChild,previousElementSibling,nextElementSibling这些IE8不支持，这里可以写能力检测兼容代码，如果还不懂什么是能力检测兼容，可以参考一下我的另一篇博客：
设置、获取样式的方式
设置样式
- className
- style(也是对象)
获取样式
- DOM的style属性只能获取标签中使用style设置的样式，无法获取嵌入或外部样式
- style.cssText 获取style里面的字符串
- 注意
- style点出来的属性都是字符串类型
- 能获取标签中的style的样式,不能获取嵌入和外部样式
- 在style标签中设置样式的时候.有些属性是多个单词组合中间用-连接,但是在js中通过style.属性设置样式的时候,属性的名字如果是多个单词组合去掉-,后面的单词首字母大写即可.
动态创建元素
- 方式一
- document.write("字符串类型的标签拼接");
- 缺点：会把页面中所有的内容替换掉
- 方式二
- 对象元素.innerHTML="字符串类型的标签拼接";
- 方式三
- document.createElement("标签名字");
- appendChild(),removeChild(),insertBefore(),replaceChild()
- 试一试 - 点击按钮动态创建表格（使用方式二和方式三其中一种）
注意点
- cloneNode(true):获取所有的标签，false为只获取当前的标签。克隆后的返回值不是一个数组，而是某一个特定的节点。
- appendChild：添加元素的子元素
- 元素节点的值nodeValue是null，文本节点的名字是#text
- nodeType（节点：元素节点，属性节点，文本节点）
- nodeName:注意：文本节点的名字是#text
- nodeValue:注意：元素节点的值是null
- IE 8中忽略了空白节点，不支持firstElementChild
- <a href="javascript:void(0)"></a>超链接不跳转
这些属性你懂了吗？