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

2016年5月26日下午（妙味课堂js基础-2笔记一（DOM））

2016-05-26 18:43 746 查看

主要内容：

1. DOM简介、DOM标准、DOM节点

2. 获取元素的子节点：childNodes、兼容性问题
3. 节点类型：nodeType、文本节点、元素节点
4. children的使用
5. 获取元素父节点parentNode
6. 获取定位元素的父节点offsetParent
7. 获取首尾子元素：firstChild、firstElementChild、lastChild、lastElementChild
8. 获取兄弟节点：nextSibling、nextElemnetSibling、previousSibling、previousElementSibling
9. 元素属性操作：“.”与“[]”回顾、setAttribute、getAttribute、removeAttribute
10. 通过className获取元素、封装getByClass函数

一、DOM基础

　　（1）什么是DOM？

（2）浏览器支持情况

二、DOM节点　

　　（1）childNodes

　　　　——获取子节点

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length);　　　　　　　　　　//这里弹出来7
oUl.childNodes[1].style.background='red';　　　　//注意这里写的是childNodes[1]
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>

显示结果为：

　　基于上面的结论我们现在来说一下：

<body><ul id="ul1"><li>111</li><li>222</li><li>333</li></ul></body>

　　当我们把代码改为这样时，就是不一样的显示结果了；

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
//alert(oUl.childNodes.length);　　　　　　　　　　//这里弹出来3
oUl.childNodes[1].style.background='red';　　　　//注意这里写的是childNodes[1]
}
</script>
</head>
<body>
<ul id="ul1"><li>111</li><li>222</li><li>333</li></ul>
</body>

显示结果为：

这是因为它把空行算作为子节点了；把它叫做文本节点（空的文本节点）；选择我们就要引入nodeType（节点类型）了；

<script type="text/javascript">
window.onload=function ()
{
alert(document.body.childNodes[1].nodeType);　　　　//当为childNodes[1]时弹出3(元素节点)；当为[0]时弹出1（文本节点）

} </script> </head> <body> aaafsa <span>fff</span> </body>

　　　注意这里是给元素加样式：（要用if进行判断！）

<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');
var i=0;
for(i=0;i<oUl.childNodes.length;i++)
{
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
</body>

　　　　——children（兼容版的childNodes）（现在好像不支持了！！！）

　　（2）parentNode（获取的是结构上的父级）

　　　　——例子：点击链接，隐藏整个li

<script type="text/javascript">
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
var i=0;

for(i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
this.style.display='none';　　　　　　　　
}
}
}
</script>
</head>
<body>
<ul>
<li>aass <a href="javascript:;">隐藏</a></li>
<li>5453 <a href="javascript:;">隐藏</a></li>
<li>cvxc <a href="javascript:;">隐藏</a></li>
<li>ertert <a href="javascript:;">隐藏</a></li>
</ul>
</body>

注意：这个没有加parentNode的显示效果为点击隐藏的话只有该隐藏消失；

parentNode的显示效果为点击隐藏的话都消失；

<script type="text/javascript">
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
var i=0;

for(i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
this.parentNode.style.display='none';
}
}
}
</script>
</head>
<body>
<ul>
<li>aass <a href="javascript:;">隐藏</a></li>
<li>5453 <a href="javascript:;">隐藏</a></li>
<li>cvxc <a href="javascript:;">隐藏</a></li>
<li>ertert <a href="javascript:;">隐藏</a></li>
</ul>
</body>

　　（3）offsetParent（offsetParent() 方法返回最近的祖先定位元素。）

　　　　——例子：获取元素在页面上的实际位置

　　　　　　定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。

　　　　可以通过 jQuery 设置 position，或者通过 CSS 的 position 属性。

<div id="div1" style="width:100px; height:100px; background:red;margin:100px;position:relative;">
<div  id="div2" onclick="alert(this.offsetParent.id)"  style="width:100px; height:100px; background:yellow;
position:absolute;left:100px;top:100px;"></div>
</div>

如果是在上面的代码的情况下，弹出来的是div；

<div id="div1" style="width:100px; height:100px; background:red;margin:100px;">
<div  id="div2" onclick="alert(this.offsetParent.tagName)"  style="width:100px; height:100px; background:yellow;
position:absolute;left:100px;top:100px;"></div>
</div>

而上述代码弹出来的是body；（因为div1上面没有加定位；）

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

标签：

相关文章推荐

新的分享

章节导航