1.DOM基础
l什么是DOM：文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的文档对象模型（Document ObjectModel）
l浏览器支持情况：IE 10% chrome 60% FF 99%
HTML DOM 模型被构造为对象的树。
2.通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素：var x=document.getElementById();
通过标签名找到 HTML 元素:var y=getElementsByTagName(); 这里要注意通过标签名查找是要先缩小查找范围；
通过类名找到 HTML 元素：var x=document.getElementsByClassName(）；通过类名查找不 兼容IE，解决方法会在下面说明；
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
2.DOM方法获取节点：
2.1.从父节点获取子节点：
childNodes， nodeType 组合使用，使用childNodes是获取到所有的元素节点以及文本节点，但一般我们只需要元素节点，所以要使用nodeType进行判断选择；
还有children也可以获取子节点，而且仅仅获取元素节点，所以比较常用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="fat">
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var oFat=document.getElementById('fat');
var num=0;
//nodeType==1 元素节点
//nodeType==3 文本节点
// for(var i=0;i<oFat.childNodes.length;i++){ //循环判断oFat中的节点是否为元素节点
// if(oFat.childNodes[i].nodeType==1){
// num++;
// }
// }
num=oFat.children.length; //children可以直接获取元素节点
console.log(num);
</script>
</html>
2.2.从子节点获取付节点：
parentNode：获取父节点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="fat">
<li id="chi"></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var oFat=document.getElementById('fat');
var oChi=document.getElementById('chi');
console.log(oChi.parentNode); //parentNode可以通过子节点获取父节点；
</script>
</html>
2.3.获取首尾子节点以及兄弟节点：
firstChild、firstElementChild ,lastChild 、lastElementChild ;有兼容性问题，需要同过判断解决：
nextSibling、nextElementSibling，previousSibling、previousElementSibling 兄弟节点也有兼容问题，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="fat">
<li></li>
<li id="chi"></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
var oFat=document.getElementById('fat');
var oChi=document.getElementById('chi');
function first(ele){ //首节点获取并实现兼容的函数
if(ele.firstElementChild){
return ele.firstElementChild; //非IE
}
else{
return ele.firstChild; //IE
}
}
function last(ele){ //尾节点获取并实现兼容的函数
if(ele.lastElementChild){
return ele.lastElementChild;
}
else{
return ele.lastChild;
}
}
function nextbro(ele){ //获取下一个兄弟节点并实现兼容的函数
if(ele.nextElementSibling){
return ele.nextElementSibling;
}
else{
return ele.nextSibling;
}
}
function prebro(ele){ //获取上一个兄弟节点并实现兼容函数
if(ele.previousElementSibling){
return ele.previousElementSibling;
}
else{
return ele.previousSibling;
}
}
console.log(prebro(oChi));
</script>
</html>
要注意在解决兼容问题要先对每个方法进行测试，一般是检测对IE的兼容；
3.用className选择元素：
前面我们用过id、标签名获取元素，兼容性比较好，但是通过类名获取元素不兼容ie浏览器。这里我们自己声明一个函数，封装以后可以使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="list">
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
</ul>
</body>
<script type="text/javascript">
// var oUl=document.getElementById('list');
// var aLi=oUl.getElementsByTagName('li');
//
// for(var i=0;i<aLi.length;i++){ //此循环可以使我们在IE中使用类名查找元素
// if(aLi[i].className=='box'){
// aLi[i].style.background='blue';
// }
// }
function getByClass(oFat,sclass){ //在IE中使用类名查找元素的函数；（封装）
var aResult=[];
var aEles=oFat.getElementsByTagName('*');
for(var i=0;i<aEles.length;i++){
if(aEles[i].className==sclass){
aResult.push(aEles[i]);
}
}
return aResult;
}
var oUl=document.getElementById('list');
var aBox=getByClass(oUl,'box'); //将获取的元素赋给一个数组变量方便使用
for(i=0;i<aBox.length;i++){
aBox[i].style.background='blue';
}
console.log(aBox.length);
</script>
</html>
4.1.获取：getAttribute(名称)
4.2.设置：setAttribute(名称, 值)
4.3.删除：removeAttribute(名称)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="按钮" />
</body>
<script>
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function() {
//oTxt.value='asdfasd';
//oTxt['value']='xczcvb';
oTxt.setAttribute('value', 'erwertwert');
};
</script>
</html>5.创建DOM元素
5.1.createElement(标签名) 创建一个节点
5.2.appendChild(节点) 追加一个节点：这个插入节点是在ul里面的后面增加的
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="btn1" type="button" value="创建li" />
<ul id="ul1">
</ul>
</body>
<script>
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick = function() {
var oLi = document.createElement('li');
//父级.appendChild(子节点);
oUl.appendChild(oLi);
};
</script>
</html>6.插入 DOM 元素：insertBefore(节点, 原有节点) 在已有元素前插入，同时，为了让节点有值，需要添加一个文本表单
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建li" />
<ul id="ul1">
</ul>
</body>
<script>
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt1');
oBtn.onclick = function() {
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');
oLi.innerHTML = oTxt.value;
if(aLi.length > 0) {
oUl.insertBefore(oLi, aLi[0]);
} else {
oUl.appendChild(oLi);
}
}
</script>
</html>7.删除DOM元素：removeChild(节点) 删除一个节点
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</script>
</head>
<body>
<ul id="ul1">
<li>asfasd
<a href="javascript:;">删除</a>
</li>
<li>5645
<a href="javascript:;">删除</a>
</li>
<li>ghdfjgj
<a href="javascript:;">删除</a>
</li>
<li>mvbnmvnb
<a href="javascript:;">删除</a>
</li>
</ul>
</body>
<script>
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
for(var i=0;i<aA.length;i++) {
aA[i].οnclick=function() {
oUl.removeChild(this.parentNode);
}
}
</html>
扫一扫
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
