第五讲 DOM基础
DOM基础:
什么是DOM:其实就是dovument,div获取、修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作;
浏览器支持情况:IE(IE7-8,10%支持率,IE9跟火狐差不多)、Chrome(60%左右的支持率)、FF(99%的支持率)
DOM节点:其实标签(CSS)、元素(JS)、节点(DOM)意思一样,只不过在不同文件中的叫法不一样而已
childNodes nodeType
abcdefghijklmn...文本节点
<span>哈哈哈……</span>元素节点
获取子节点
<script>
window.onload=function(){
var oUL=document.getElementById('ul1');
alert(oUL.childNodes.length); //火狐、IE9等版本,返回值为5,但是在IE6-8返回的是2,即两个<li>标签
};
</script> <ul id=”ul1”> //该空白区及下一行标签前空白区域,属于第一个节点
<li>qqqq</li> //本行标签属于第二个节点 //该空白区及下一行标签前空白区域,属于第三个节点
<li></li> //本行标签属于第四个节点 //该空白区及下一行标签前空白区域,属于第五个节点
</ul>
需要注意的是,节点没有style样式的(但是在IE7,文本节点会有样式,即可在JS中修改“节点”样式),但是所有节点会有一个nodeType(节点类型)
<script>
window.onload=function(){
var oUL=document.getElementById('ul1');
for (var i=0; i<oUl.childNodes.length; i++){
//oUL.childNodes[i].style.background='red'; //修改样式无果,因为节点没有样式
// alert(oUL.childNodes[i].nodeType); //nodeType=3表示文本节点共3个;nodeType=1表示元素节点,共2个。
if (oUL.childNodes[i].nodeType==1){
oUL.childNodes[i].style.background='red';
}
}
};
</script> <ul id=”ul1”> //该空白区及下一行标签前空白区域,属于第一个节点
<li>qqqq</li> //本行标签属于第二个节点 //该空白区及下一行标签前空白区域,属于第三个节点
<li></li> //本行标签属于第四个节点 //该空白区及下一行标签前空白区域,属于第五个节点
</ul>
children属性,比childNodes更方便,它与childNodes很相似,但是最大的不同是,children属性只包括元素,不包括文本,而且在<li>标签内的节点只属于<li>的子节点,而不属于<ul>的子节点
<script>
window.onload=function(){
var oUL=document.getElementById('ul1');
alert(oUL.children.length); //返回值为2,表示两个<li>标签
};
</script>
parentNode:父节点,如上面代码<ul>是<li>的父节点
var oUL=document.getElementById('ul1');
alert(oUL.parentNode); //返回值为[object HTMLBodyElement] 即body标签
例子——点击链接,隐藏整个li:
<script>
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> <ul id="ul1">
<li>aaaaa<a href="javascript:;">隐藏</a></li>
<li>bbbbb<a href="javascript:;">隐藏</a></li>
<li>ccccc<a href="javascript:;">隐藏</a></li>
<li>ddddd<a href="javascript:;">隐藏</a></li>
<li>eeeee<a href="javascript:;">隐藏</a></li>
<li>fffff<a href="javascript:;">隐藏</a></li>
</ul>
offsetParent:例子——获取元素在页面上的实际位置
补充:CSS中绝对定位的元素,是根据谁定位的呢,它是根据有定位的父级来进行定位的,比如说,某个元素节点直接父级没有定位,则往上找,即找其父级的父级是否有定位,依次往上找,如果一直没有,直至找到<body>为止,
offsetParent:就是用来寻找某一个元素,用来定位的父级,如果一直没有,直到找到<body>为止
<style>
#div1{width: 200px; height: 200px; background: #cccccc; 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); //返回[object HTMLDivElement],当去掉#div1的相对定位返回的值即为[object HTMLBodyElement]
};
</script>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
首位子节点:firstChild:第一个子节点(适用于IE6-8等低版本浏览器)、firstElementChild:第一个子节点(适用于IE9以上等高版本浏览器)、lastChild:最后一个子节点(适用于IE6-8等低版本浏览器)、lastElementChild(适用于IE9以上等高版本浏览器);所以有兼容性问题
var oUl=document.getElementById('ul1');
// oUl.firstChild.style.background='red'; //适用于IE6-8等低版本浏览器
// oUl.firstElementChild.style.background='red'; //适用于高版本等高级浏览器
// 为了解决兼容问题,可以用以下方法:
if (oUl.firstElementChild){ //如果oUl.firstElementChild存在,则执行
oUl.firstElementChild.style.background='red';
} else { //否则执行
oUl.firstChild.style.background='red';
}
兄弟节点:nextSibling:下一个兄弟节点(适用于IE6-8等低版本浏览器)、nextElementSibling下一个兄弟节点(适用于IE9以上等高版本浏览器)、previousSibling:上一个兄弟节点(适用于IE6-8等低版本浏览器)、previousElementSibling上一个兄弟节点(适用于IE9以上等高版本浏览器);所以同上理,有兼容性问题
操纵元素属性:
语素属性操作:(三种方法效果一样)
第一种:oDiv.style.display="block";
第二种:oDiv.style["display"]="block";
第三种:DOM方式: oDiv.setAttribute('dispaly', 'block');
DOM方式操作元素属性:
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)
DOM元素灵活查找:
前面讲过获取元素的方法有:getElementById(); getElementsByTagName();
用className选择元素:
如何用className选择元素
选出所有元素
通过className条件筛选
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li'); for (var i=0; i<aLi.length; i++){
if (aLi[i].className=='box'){
aLi[i].style.background='red';
}
}
封装成函数
//把获取元素className属性的代码封装成一个函数
function getByClass(oParent, sClass){
var aResult=[]; //定义空数组,作用是把所有找到的元素放入该数组中
var aEle=oParent.getElementsByTagName('*'); //其中 * 表示通配符,表示获取所有 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';
}
};
第五讲 DOM基础的更多相关文章
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础(一)概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础(四)
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础(二)
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- python学习第五讲,python基础语法之函数语法,与Import导入模块.
目录 python学习第五讲,python基础语法之函数语法,与Import导入模块. 一丶函数简介 1.函数语法定义 2.函数的调用 3.函数的文档注释 4.函数的参数 5.函数的形参跟实参 6.函 ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
随机推荐
- Python实现AD域认证
Python 通过ldap进行ad域账号的校验. 首先需要安装python-ldap的模块 http://www.python-ldap.org/. 在这里用的是windows系统,当然比较容易,下载 ...
- Git忽略已经被版本控制的文件(添加.gitignore不会起作用)
说明:已经被维护起来的文件(需要被远程仓库控制),即使加入.gitignore也会无济于事. .gitignore只对那些只存在在本地,而不在远程仓库的文件起作用.(untraked file). 操 ...
- LeetCode - 703. Kth Largest Element in a Stream
Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...
- js监听手机端点击物理返回键或js监听pc端点击浏览器返回键
之前在项目中遇到一个问题,就是在微信网页上面本来是有返回按钮的,但是大多数人都为了方便,会使用安卓手机自带的物理返回键,这个返回键按下后,就会按照你浏览器的栈存储的路径来一层一层返回,就不执行你页面上 ...
- 【python】——sql模拟
一.作业需求: 当然此表你在文件存储时可以这样表示 1,Alex Li,22,13651054608,IT,2013-04-01 现需要对这个员工信息文件,实现增删改查操作 可进行模糊查询,语法至少支 ...
- redash学习记录
一.简介 一款开源的 BI 工具Redash 二.参考资料 一款开源的 BI 工具Redash 浅析数据查询与可视化工具--Redash
- C和C指针小记(十八)-使用结构和指针-双向链表
1.双链表 1.1 双向链表的声明 在一个双链表中,每个节点都包含两个指针--指向前一个节点的指针和指向后一个节点的指针. 声明 typedef struct NODE { struct NODE * ...
- ios安装ipa与安卓安装apk
ideviceinstaller -i .ipa包所在的路径 环境搭建:Mac上安装brew(brew里面有很多命令,可以安装自己想用的命令) 安装命令如下:curl -LsSf http://git ...
- QSS独门秘籍:subcontrol
QSS是C++ Qt中的界面美化神器,其语法和CSS区别不大,但是QSS有一个独有的功能——subcontrol,这是CSS所没有的,一个widget往往由多个子部件构成,利用subcontrol可以 ...
- java JFR
1. 参数: -XX:+UnlockCommercialFeatures -XX:+FlightRecorder 2. 运行命令: jcmd <PID> JFR.start name=te ...