您的位置：首页 > Web前端 > JavaScript

JavaScript——DOM基础

2017-01-21 21:04 204 查看

DOM基础

DOM就是JavaScript中的document

兼容性：

高版IE能部分大部分DOM，IE8及以下只能兼容一点点

Chrome基本能兼容一半左右

FireFox大部分都能兼容

DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul1');

alert(oUl.childNodes.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

childNodes获取子节点

在以上函数中，一对
标签算一个节点

一个回车/空格算一个节点，所以在Firefox、chrome、以及IE9及以上的浏览器中都会弹出11，在IE6-8中显示正常为5

nodeType用于分辨节点的类型

nodeType == 3 -> 文本节点

nodeType == 1 -> 元素节点

兼容性解决方法：

window.onload = function(){
var oUl = document.getElementById('ul1');

for (var i = 0; i < oUl.childNodes.length; i++) {
if (oUl.childNodes[i].nodeType == 1) {
oUl.childNodes[i].style.background = 'red';
};
};
}

window.onload = function(){
var oUl = document.getElementById('ul1');

for (var i = 0; i < oUl.children.length; i++) {
oUl.children[i].style.background = 'red';
};
}

第二种方法更简便

子节点只算第一层

查找父节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){

var aA = document.getElementsByTagName('a');

for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function(){
this.parentNode.style.display = 'none';
}
};
}
</script>
</head>
<body>
<ul id="ul1">
<li>gsifgcbweiu<a href="javascript:;">隐藏</a></li>
<li>uegvwr<a href="javascript:;">隐藏</a></li>
<li>168<a href="javascript:;">隐藏</a></li>
<li>ujuybfgcsd<a href="javascript:;">隐藏</a></li>
<li>184916<a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>

parentNode父节点

当点击‘隐藏’时，那一行所有的内容都会消失

offsetParent获取有相对定位的父级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="te
e598
xt/css">
#div1 {
width: 200px;
height: 200px;
background: red;
margin: 100px;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
background: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script type="text/javascript">
window.onload = function (){
var oDiv2 = document.getElementById('div2');

alert(oDiv2.offsetParent);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>

根据样式不同，位置会发生变化

firstChild、firstElementChild第一个节点

lastChild、lastElementChild最后一个节点

nextSibling、nextElementSibling下一个兄弟节点

previousSibling、previousElementSibling前一个兄弟节点

在低版本IE中用firstChild等，在其他浏览器中，多数只用后一个

解决兼容性问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul1');

if (oUl.firstElementChild) {
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
}
}
</script>

</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

元素的属性操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function (){
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');

oBtn.onclick = function (){
oTxt.value = 'adffg';
}
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="按钮">
</body>
</html>

当点击按钮时，text的文本框中会出现value值

oTxt.setAttribute(‘value’, ‘asdfd’);

oTxt[‘value’] = ‘asd’;

oTxt.value = ‘adffg’;

三种使用方法一样

setAttribute（’要设置的东西(名称)’,’内容’）设置元素属性

getAttribute（’要设置的东西(名称)’）获取元素属性

removeAttribute（’要设置的东西(名称)’）删除元素属性

选取元素

用 className来分拣元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function getByClass(oParent,sClass)
{
var aEle = oParent.getElementsByTagName('*');
var aResult = [];

for (var i = 0; i < aEle.length; i++) {
if(aEle[i].className == sClass){
aResult.push(aEle[i]);
}
}

return aResult;
}
window.onload = function (){
var oUl = document.getElementById('ul1');
var aBox = getByClass(oUl,'box');

for (var i = 0; i < aBox.length; i++) {
aBox[i].style.background = 'red';
};
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
</ul>
</body>
</html>

第一个js函数用于分装

由此可以选出所有的class为box的元素

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript dom

相关文章推荐

新的分享

章节导航