DOM:Document Object Model
document对象是DOM核心对象
作用:对html中的内容、属性、样式进行操作
节点树中节点之间的关系:父子、兄弟
DOM常用属性
1、title属性:返回或设置当前文档的标题
2、all:返回所有元素的集合
3、forms:返回文档中所有form对象的引用
通过集合来访问相应的对象:
1、通过下标的方式
2、通过name的方式
DOM的查询方法
1、document.getElementById(id); //返回拥有指定id的(第一个)对象的引用
2、document.getElementsByTagName(tagName); //返回指定标签名的集合,就算找到的标签名只有一个,返回的也是一个集合
注:上面两个方法没有兼容性问题
3、document.getElementsByName(name); //返回带有指定name指定名称的对象集合(有兼容性问题)
注:document.getElementsByName()因为兼容性问题,主要适用于表单
4、document.write(); 将内容打印在页面中
5、document.getElementsByClassName(className); //返回带有指定className指定名称的对象的集合。有兼容问题
function byClassName(sClassName){
if(document.getElementsByName){//判断在没有兼容性下的直接输出
return document.getElementsByClassName(sClassName);
}else{
//获取所有元素
var tag = document.getElementsByTagName('*');//*表示通配符
var result = [];
for(var i = 0 ; i < tag.length; i++){//遍历获取的所有元素
if(tag[i].className == sClassName){
result.push(tag[i]);
}
}
return result;
}
}
console.log(byClassName('pink').length);
操作内容
1、innerHTML:用来设置或获取对象起始和结束标签内(例如div框架,它只会获取div里面的内容,而不会获取div)的内容(识别html标签)
2.innerText:用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE,最新版火狐已支持)。
textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐,IE8及其以下不支持)。
3.outerHTML 用来设置或获取包括本对象在内的起始和结束标签内(例如div框架,不仅会获取div里面的内容,也会获取div自身的内容)的内容(识别html标签) 。
4.outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)(火狐不支持)。
区别:<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML和innerText、outerHTML的区别</title>
<script type="text/javascript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" οnclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>
操作属性
getAttribute("属性") //获取给定的属性的值
setAttribute("属性","值") //设置或是添加属性
removeAttribute("属性") //删除属性
操作样式
DOM增删改查
父对象.appendChild(newNode) //插入到父对象的最后
例:oList.appendChild(oLi);
父对象.inserBefore(newNode,existsNode) //插入到什么对象之前
例:oList.insertBefore(oLi, aLi[0]);
三、修改(替换)节点
父对象.replaceChild(newNode,existsNode) //前面的替换后面的
例:oList.replaceChild(oLi, aLi[0]);
四、删除节点
父元素.removeChild(oldNode);
如果确定要删除节点,最好也清空内存 对象 = null;
五、表格操作
// 获取tBody
var tBody = oTable.tBodies[0];
// 获取tr
// var oTr = tBody.rows[2];
// 获取td
// var oTd = oTr.cells[1];
// 读取
// console.log(oTd.innerHTML);
// 修改
// oTd.innerHTML = '宋second';
// 添加新的一行
// var oNewTr = tBody.insertRow(5);
// // 创建四列
// var oNewTd = oNewTr.insertCell(0);
// oNewTd.innerHTML = 5;
// var oNewTd = oNewTr.insertCell(1);
// oNewTd.innerHTML = '宋老五';
// var oNewTd = oNewTr.insertCell(2);
// oNewTd.innerHTML = 0;
// var oNewTd = oNewTr.insertCell(3);
// oNewTd.innerHTML = '女';
// 删除一行
var oDeleteTr = tBody.rows[tBody.rows.length - 1];
tBody.removeChild(oDeleteTr);