JavaScript学习（三）
JavaScript DOM基础
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>子节点</title>
<style type="text/css">
#div1 {width: 200px; height: 200px; background: red;}
#div2 {width: 50px; height: 50px; background: #CCC; position: absolute; left: 50px; top: 50px}
</style>
<script type="text/javascript">
// 节点知识
// 此处，div的父节点是body，ul的父节点是ul
window.onload = function() {
var oUl = document.getElementById('ul1');
// 输出的是5，即5个节点
// 因为空白处也算一个节点，叫文本节点
// 标签处算是一个节点，叫元素节点
// 所以，在ul中有三个本文节点，两个元素节点总共5个节点
// 文本节点没有style
// 所以如果用循环来给childNodes设置背景的话，会出错
// 属性nodeType用来返回节点的类型
// nodeType == 3 -> 文本节点
// nodeType == 1 -> 元素节点
alert(oUl.childNodes.length);
for (var i = 0; i < oUl.childNodes.length; i++) {
alert(oUl.childNodes[i].nodeType);
};
// DOM还有一个属性，children，children只包括元素，不包括文本
alert(oUl.children.length);
// parentNode父节点
// var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function() {
// 这里的this指的是a标签
this.parentNode.style.display = 'none';
}
};
// offsetParent是获取用来定位的父级节点
// 在上面的div1样式表中，将position: relative去掉的话，
// 下面语句返回的是body，就不是div了
// 因为div2的相对定位变成了body
var oDiv2 = document.getElementById('div2');
alert(oDiv2.offsetParent);
}
</script>
</head>
<body>
<!-- <div>
<ul id="ul1">
<li>fdfasfdsafsafa<a href="javascript:;">隐藏</a></li>
<li>fggnntytytw<a href="javascript:;">隐藏</a></li>
<li>321fa<a href="javascript:;">隐藏</a></li>
<li>ff432asffsafa<a href="javascript:;">隐藏</a></li>
</ul>
</div> -->
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>firstChild和firstElementC</title>
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById('ul1');
// firstChild在低版本的浏览器中适用
// firstChild指的是第一个文本节点
// 所以设置背景颜色会出错
// oUl.firstChild.style.background = 'red';
// 高版本的浏览器中用firstElementChild
// oUl.firstElementChild.style.background = 'red';
if (oUl.firstElementChild) {
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
};
// DOM方式获取元素的属性
// 前面讲过用.和[]来获取元素的属性
// DOM获取元素属性的用法比较少，先记住，有必须用的时候
var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
oTxt.setAttribute('value', 'dfsafasfasdf');
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
<input id="txt" type="text" />
<input id="btn" type="button" value="按钮" />
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>className获取标签</title>
<script type="text/javascript">
// className获取标签就是将所有标签或取出来然后通过className过滤标签
function getClassName(oParent, oClassName) {
// 获取父节点下的所有子节点
var oElem = oParent.getElementsByTagName('*');
var arry = [];
for (var i = 0; i < oElem.length; i++) {
if (oElem[i].className == oClassName) {
arry.push(oElem[i]);
};
};
return arry;
}
window.onload = function() {
var oUl = document.getElementById('ul1');
var arryElem = getClassName(oUl, 'box');
for (var i = 0; i < arryElem.length; i++) {
arryElem[i].style.background = 'red';
};
}
</script>
</head>
<body>
<div>
<ul id="ul1">
<li class="box"></li>
<li></li>
<li class="box"></li>
</ul>
</div>
</body>
</html>
JavaScript DOM操作应用
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>创建元素</title>
<script type="text/javascript">
window.onload = function() {
// 正序插入
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt');
oBtn.onclick = function() {
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
}
// 倒序插入
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt');
var aA = null;
oBtn.onclick = function() {
var aLi = document.createElement('li');
var oLi = document.getElementsByTagName('li');
aLi.innerHTML = oTxt.value + "<a href='javascript:;'>删除</a>";
aA = document.getElementsByTagName('a');
// 在一组li标签的第一个标签进行插入
oUl.insertBefore(aLi, oLi[0]);
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function() {
// 删除插入的标签
oUl.removeChild(this.parentNode);
}
};
}
}
</script>
</head>
<body>
<input id="txt" type="text" />
<input id="btn" type="button" value="添加li元素" />
<ul id="ul1"></ul>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>表格操作</title>
<style type="text/css">
#div1 {margin: 50px}
</style>
<script type="text/javascript">
window.onload = function() {
var oTab = document.getElementById('tab');
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
var oBtn = document.getElementById('btn');
// tBodies属性，取得tbody标签下的所有元素
// 因为一个表格中可以有很多的body，所以tbody获取的参数是负数形式
// 还有属性，tHead（表头），tFoot（表尾）
// 一般写表格tbody省略了，浏览器可以自动的加上
// rows取得第n行的元素
// cells取得第n列的元素
// alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
// toLowerCase()忽略大小写
oBtn.onclick = function() {
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
var oNum = oTab.tBodies[0].rows.length;
oTd.innerHTML = parseInt(oTab.tBodies[0].rows[oNum - 1].cells[0].innerHTML) + 1;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oTxt1.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oTxt2.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = "<a href='javascript:;'>删除</a>";
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
var aA = document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function() {
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
};
for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
oTab.tBodies[0].rows[i].onmouseover = function() {
// 不写this的话，没反应
this.style.background = '#CCC';
}
oTab.tBodies[0].rows[i].onmouseout = function() {
this.style.background = '';
}
};
}
}
</script>
</head>
<body>
<div align="center">
姓名：<input id="txt1" type="text" />
年龄：<input id="txt2" type="text" />
<input id="btn" type="button" value="添加表单" />
</div>
<div id="div1" align="center">
<table id="tab" border="1" width="500px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tom</td>
<td>22</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Jack</td>
<td>31</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>smith</td>
<td>322</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>fd</td>
<td>322</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>ifdsah</td>
<td>322</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>javaScript_模糊搜索</title>
<script type="text/javascript">
var str = 'abcdefg';
// search()方法找到后返回字母下标，没找到就返回-1
// 进行模糊搜索的话，就判断search()函数返回值是否是-1
// 不是-1的话就把结果都显示出来
// 即，包含关键字的搜索结果都会被检索出来
// appendChild()是先把元素从原有的父级上删掉，然后放到插入的地方
alert(str.search('c'));
</script>
</head>
<body>
</body>
</html>