智能社JavaScript学习笔记——11 - DOM基础
DOM （Document Object Model, 文档对象模型）
标签——CSS
元素——JS
节点——DOM
元素属性操作方式：
1. oDiv.style.display = ‘block’;
2. oDiv.style[‘display’] = ‘block’;
3. DOM方式
DOM方式操作元素属性：
1. 获取：getAttribute(名称)
2. 设置：setAttribute(名称，值)
3. 删除：removeAttribute(名称)
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function()
{
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function()
{
//oTxt.value = "adgregg";
//oTxt['value'] = "adgregg"; // oTxt[value] 错误！！！
oTxt.setAttribute('value', 'dilgislgi');
};
};
script>
head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="按钮"/>
body>
html>DOM节点
获取子节点 ：childNodes nodeType （不兼容，可以用children代替）
parentNode
例子：点击链接，隐藏整个li
offsetParent
例子：获取元素在页面上的实际位置
子节点
注意：子节点只算第一层！
文本节点
元素节点
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function(){
var oUl = document.getElementById('ul1');
alert(oUl.childNodes.length);
};
script>
head>
<body>
<ul id='ul1'>
<li>li>
<li>li>
ul>
body>
html>结果：
chrome、FF、IE9 : 5
IE6-8： 2
不兼容，改用children：
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function(){
var oUl = document.getElementById('ul1');
alert(oUl.children.length);
for(var i=0; i'red' ;
}
};
script>
head>
<body>
<ul id='ul1'>
<li>li>
<li>li>
ul>
body>
html>*NodeType (节点类型):*
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function(){
var oUl = document.getElementById('ul1');
//alert(oUl.childNodes.length);
//nodeType==3 -> 文本节点
//nodeType==1 -> 元素节点
for(var i=0; iif (oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background = 'red';
}
}
};
script>
head>
<body>
<ul id='ul1'>
<li>li>
<li>li>
ul>
body>
html>子节点（2）
DOM节点(2)
首尾子节点 (有兼容性问题 )
- firstChild （IE6-8）、firstElementChild （chrome、FF、IE9）
- lastChild （IE6-8） 、lastElementChild（chrome、FF、IE9）
兄弟节点 (有兼容性问题)
- nextSibling （IE6-8）、nextElementSibling（chrome、FF、IE9）
- previousSibling （IE6-8）、previousElementSibling（chrome、FF、IE9）
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function()
{
var oUl = document.getElementById('ul1');
if(oUl.firstElementChild) // 解决兼容问题，用if做判断
{
//高级浏览器：
oUl.firstElementChild.style.background = 'red';
}
else
{
//IE6-8:
oUl.firstChild.style.background = 'red';
}
};
script>
head>
<body>
<ul id='ul1'>
<li>1li>
<li>2li>
<li>3li>
ul>
body>
html>父节点（parentNode）
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function()
{
var aA = document.getElementsByTagName('a');
for(var i=0; ifunction ()
{
//aA[i].parentNode.style.display = 'none'; // 不行
this.parentNode.style.display = 'none';
}; // 用this获取当前点击的链接!!!
}
};
script>
head>
<body>
<ul id='ul1'>
<li>123445<a href=javascript:;>隐藏a>li>
<li>dseggggg<a href=javascript:;>隐藏a>li>
<li>ohkgrg5<a href=javascript:;>隐藏a>li>
<li>llllll<a href=javascript:;>隐藏a>li>
<li>bbbbbbbbbbb<a href=javascript:;>隐藏a>li>
ul>
body>
html>offsetParent: 用来获取一个元素定位的父级
<html>
<head>
<meta charset='utf-8' />
<title>title>
<style>
#div1 {width:200px; height:200px; background:#ccc; margin:100px; position:relative;}
#div2 {width:100px; height:100px; background:red; position:absolute; left:50px; top:50px;}
style>
<script>
window.onload=function()
{
var oDiv2 = document.getElementById('div2');
alert(oDiv2.offsetParent);
};
script>
head>
<body>
<div id='div1'>
<div id='div2'>
div>
div>
body>
html>输出结果： [object HTMLDivElement]
如果去掉div1样式中的 position: relative; 那么div2就相对于body定位。
输出结果： [object HTMLBodyElement]
用className获取元素
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
window.onload=function()
{
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
for(var i=0; iif (aLi[i].className == "box")
{
aLi[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>
<li>li>
ul>
body>
html>把用className取元素的功能封装成一个函数：
<html>
<head>
<meta charset='utf-8' />
<title>title>
<script>
function getByClass(oParent, sClass)
{
var aResult = [];
var aEle = oParent.getElementsByTagName('*'); // *是通配符
for(var i=0; iif (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"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>
<li>li>
ul>
body>
html>