JS核心知识点：DOM\BOM\EVENT
1.DOM(Document Object Model) :文档对象模型
2. DOM节点：页面中最基本的组成部分
3. childNodes：获取某个节点下所有的子节点
- 在标准及ie9以上 ： 会获取空文本节点。
- 在ie6/7/8 : 没有空文本节点。
<script type="text/javascript">
window.onload=function ()
{
t=document.body.childNodes[0].nodeType;
alert(t)// 3 文本节点
m=document.body.childNodes[1].nodeType;
alert(m)// 1 元素节点 }
</script>
</head> <body>
文本文字
<Span>123455</Span> </body>
</html>
4. nodeType：查看某个节点的类型
- 1 代表 元素节点
- 2 代表 属性节点
- 3 代表 文本节点
- 8 代表 注释节点
- 9 代表 文档节点
<script type="text/javascript">
window.onload=function ()
{
var oUl=document.getElementById('ul1');//选出ul
for(var i=0;i<oUl.childNodes.length;i++){
oUl.childNodes[i].style.background='red';//让所有的子节点变红色 火狐下没有变色 }
}
</script> <ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
5. nodeName：查看某个节点的标签名
6. children：获取某个节点下所有的子节点
a. 和childNodes的区别是，children只会获取到元素节点
b. children非标准属性，childNodes是标准属性
7. parentNode：获取元素的父级
8. offsetParent获取定位元素的父节点
--- 实例：树形菜单收缩与展开
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多级展开菜单</title>
<style>
body,ul{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none; color: #000; font-size: 18px; height: 24px; line-height: 24px; display: block;}
a:hover{color: red;}
#ul1{margin: 50px;}
ul{position: relative;left: 20px;}
#ul1 ul{display: none;}
</style>
<script>
window.onload = function(){
var oUl1 = document.getElementById('ul1');
var aUl = oUl1.getElementsByTagName('ul');
var aA = oUl1.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
var oUl = getNext( this ); //a的下一个兄弟节点，即要展开的下一级 //获取此li下的所有子孙ul(有问题：同级点关不了。)
//获取此li父级ul下
var siblingsUl = this.parentNode.parentNode.getElementsByTagName('ul'); if( oUl ){
if( oUl.style.display == 'block' ){
oUl.style.display = 'none';
}else{
//如果是隐藏的点击，全关，开当前。。如果是的展开，上次点击已经全关了，再点直接关闭即可
/*for(var i=0; i<aUl.length; i++){
aUl[i].style.display = 'none';
} //问题：二级以下无法展开 */ for(var i=0; i<siblingsUl.length; i++){
siblingsUl[i].style.display = 'none';
} oUl.style.display = 'block';
}
} var oSpan = this.getElementsByTagName('span')[0];
var aSpan = this.parentNode.parentNode.getElementsByTagName('span'); if( oSpan.innerHTML == '-' ){
oSpan.innerHTML = '+'; }else{
for(var i=0; i<aSpan.length; i++){
aSpan[i].innerHTML = '+';
} oSpan.innerHTML = '-'; } }
} function getNext( obj ){
if( !obj || !obj.nextSibling ) return null;
return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling );
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><a href="javascript:;"><span>+</span>第一级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第二级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第三级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第四级菜单</a>
<ul>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;"><span>+</span>第二级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第三级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第四级菜单</a>
<ul>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第二级菜单</a></li>
<li><a href="javascript:;">第二级菜单</a></li>
</ul>
</li> <li><a href="javascript:;"><span>+</span>第一级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第二级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第三级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第四级菜单</a>
<ul>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;"><span>+</span>第二级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第三级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第四级菜单</a>
<ul>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第二级菜单</a></li>
<li><a href="javascript:;"<span>+</span>第二级菜单</a></li>
</ul>
</li> <li><a href="javascript:;"><span>+</span>第一级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第二级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第三级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第四级菜单</a>
<ul>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;"><span>+</span>第二级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第三级菜单</a>
<ul>
<li><a href="javascript:;"><span>+</span>第四级菜单</a>
<ul>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
<li><a href="javascript:;">第五级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
<li><a href="javascript:;">第四级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
<li><a href="javascript:;">第三级菜单</a></li>
</ul>
</li>
<li><a href="javascript:;">第二级菜单</a></li>
<li><a href="javascript:;">第二级菜单</a></li>
</ul>
</li> </ul>
</body>
</html>
1. 获取第一个或最后一个节点，也可以获取元素上个或下个兄弟节点的属性
- firstChild : 第一个子节点 在标准和ie9下会获取到空白文本节点。
- firstElementChild : 标准下获取第一个子元素节点，ie6/7/8不支持。
- lastChild : 最后一个子节点 在标准和ie9下会获取到空白文本节点。
- lastElementChild : 标准下获取最后一个子元素节点，ie6/7/8不支持。
- nextSibling：下一个兄弟节点 在标准和ie9下会获取到空白文本节点。
- nextElementSibling：标准下获取下一个兄弟节点，ie6/7/8不支持。
- previousSibling：上一个兄弟节点，在标准和ie9下会获取到空白文本节点。
- previousElementSibling：标准下获取上一个兄弟节点，ie6/7/8不支持
--- 实例：封装四个方法 first()、last()、next()、prev();
<script type="text/javascript">
//封装函数
function getPrev( obj ){
if( !obj || !obj.previousSibling ) return null;
//先处理参数为假或者兄弟节点不存在的情况。
return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling );
}
function getNext( obj ){
if( !obj || !obj.nextSibling ) return null;
//先处理参数为假或者兄弟节点不存在的情况。
return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling );
}
function getFirst( obj ){
if( !obj || !obj.firstChild ) return null;
return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild );
}
function getLast( obj ){
if( !obj || !obj.lastChild ) return null;
return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild );
}
</script>
2. offsetParent：距离当前节点最近的具有定位属性的祖先节点
3. 元素定位后相对offsetParent的距离
a. offsetLeft : 当前节点的左外边框到offsetParent的左内边框之间的距离。
b. offsetTop : 当前节点的上外边框到offsetParent的上内边框之间的距离。
--- 实例：实用的文字提示层
4. 文档宽高：元素在页面所占的空间宽高
a. offsetWidth / offsetHeight：获取元素在页面所占的空间宽高，包含边框
b. clientWidth / clientHeight ：获取元素在页面所占的空间宽高，不包含边框
注意：如果元素没有占页面空间，那么这四属性的值都为0
(比如给元素设置了 display: none; 属性)
5. 内容宽高：被内容所撑出来的高度
a. scrollWiddth / scrollHeigt : 获取被内容所撑出来的高度
注意：当获取body的内容宽高时，在chrome下内容宽高没有可视区宽高，
内容宽高就是可视区的宽高。
其他浏览器， 内容的实际宽高
--- 实例：全盘锁定页面，元素不可操作
知识点：DOM中动态创建元素
当使用innerHTML的时候，赋值之前的事件，赋值后会被注销。
1、createElement（’要创建的标签名‘）：创建一个DOM节点
语法：document.createElement（’要创建的节点‘）只能从document中去创建新节点；
--- 实例：创建留言板内容
2、父级.appendChild（要添加的元素）；从父级的尾部添加一个节点。
--- 实例：留言板插入内容
3、父级.insertBefore（要添加的元素 ）；从父级的首部添加一个节点。第一个参数：准备插入的节点（内容）；第二个参数：插入到哪个节点的前面（目标）；
如果父级没有内容，那么会新添加一个元素节点；
在IE下如果第2个参数不存在会报错；在其他标准浏览器下如果第二个参数的节点不存在则会以appendChild的形式进行添加；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板加强，限制条数</title>
<script>
window.onload = function(){ var oText = document.getElementById('text1'),
oBtn = document.getElementById('btn'),
oUl = document.getElementById('ul1'),
n = 5; //此处可以设置保留条目的数量 oBtn.onclick = function(){ if (!oText.value){
return;
} var oLi = document.createElement('li');
oLi.innerHTML = oText.value; if (oUl.children[0]) {
oUl.insertBefore(oLi, oUl.children[0]);
} else {
oUl.appendChild(oLi);
} if (oUl.children[n]){
oUl.removeChild(oUl.children[n]);
} oText.value = ''; } }
</script>
</head>
<body>
<input type="text" id='text1' /><input type="button" value="留言" id="btn" />
<ul id="ul1"></ul>
</body>
</html>
4、父级.removeChild( 删除谁) ； 从一个节点里面删除某个指定的子节点。
--- 实例：删除留言内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板加强，批量删除</title>
<script>
window.onload = function(){ var oText = document.getElementById('text1'),
oBtn = document.getElementById('btn'),
oUl = document.getElementById('ul1'),
oDelete = document.getElementById('btn1'),
flag = true; oBtn.onclick = function(){ if (!oText.value){
return;
} var oLi = document.createElement('li');
oLi.innerHTML = oText.value; if (oUl.children[0]) {
oUl.insertBefore(oLi, oUl.children[0]);
} else {
oUl.appendChild(oLi);
} oText.value = ''; for (var i = 0; i < oUl.children.length; i++) {
oUl.children[i].onclick = function(){
if (flag) {
this.mark = '1';
this.style.background = 'yellow';
flag = !flag;
} else {
this.mark = '';
this.style.background = '';
flag = !flag;
}
}
}; } oDelete.onclick = function(){ for (var i = 0; i < oUl.children.length; i++) { if(oUl.children[i].mark) {
oUl.removeChild(oUl.children[i]);
i--;
} }; } }
</script>
</head>
<body>
<input type="text" id='text1' /><input type="button" value="留言" id="btn" /><input type="button" value="批量删除" id="btn1" />
<ul id="ul1"></ul>
</body>
</html>
5、父级.replaceChild( ) ；用一个节点替换掉另一个节点里面指定的子节点。
有两个参数：第一个参数是newNode（新的节点）；第二个参数是oldNode（想要替换的节点）；且当替换元素之后，之前绑定的所有事件都将会被清空；
--- 实例：始终显示一条留言
解决方案：循环一遍后再添加，或者通过createElement创建出来的元素上添加事件。
6、要克隆的元素. cloneNode( )：克隆节点；如果没有参数那么只会克隆这个元素，但不会克隆里面的子元素；
如果参数是 true 那么会克隆所有的元素包含子元素；
如果参数是 false 那么只会克隆当前要克隆的元素（不包含子元素）；
被克隆的元素如果包含事件，则事件是无法被克隆的；（克隆->复制）
--- 综合实例：元素上移下移，加上运动形式
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
ul{
position: relative;
}
li{
padding: 10px;
position: relative;
}
</style>
<script>
window.onload = function()
{
var oUl = document.getElementById('oUl');
var oLi = oUl.children;
for(var i=0 ; i<oLi.length ; i++)
{
oPre = oLi[i].children[1];//上一个
oNext = oLi[i].children[2];//下一个
oPre.onclick = function()//上一个
{ //当插入的目标点为空时，默认被插的元素是放在它父级的最后一个上故而当点击第一个的时候会自动跳到最后一个
var prevLi = Prev(this.parentNode);
oUl.insertBefore(this.parentNode,prevLi);//把当前节点插入到上一个节点前
}
oNext.onclick = function()//下一个
{
if(!Next(this.parentNode))//判断
{
oUl.insertBefore(this.parentNode,oLi[0]);
return;
}
var nextLi = Next(this.parentNode);
oUl.insertBefore(nextLi,this.parentNode);//把下一个节点插入到当前节点前
} }
function Prev(obj){
if(!obj || !obj.previousSibling){
return null;
}
return obj.previousSibling.nodeType==1?obj.previousSibling:Prev(obj.previousSibling);//判断元素节点，如果等于1就是元素节点，故而直接返回previousSibling
}
function Next(obj){
if(!obj || !obj.nextSibling){
return null;
}
return obj.nextSibling.nodeType==1?obj.nextSibling:Next(obj.nextSibling);
}
}
</script>
</head> <body>
<ul id="oUl">
<li>
<span>啦啦啦啦 1</span>
<input type="button" value="上移" class="pre">
<input type="button" value="下移" class="next">
</li>
<li>
<span>哈哈哈哈 2</span>
<input type="button" value="上移" class="pre">
<input type="button" value="下移" class="next">
</li>
<li>
<span>嘿嘿额和 3</span>
<input type="button" value="上移" class="pre">
<input type="button" value="下移" class="next">
</li>
<li>
<span>呱呱呱呱 4</span>
<input type="button" value="上移" class="pre">
<input type="button" value="下移" class="next">
</li>
<li>
<span>哥哥哥哥 5</span>
<input type="button" value="上移" class="pre">
<input type="button" value="下移" class="next">
</li>
</ul>
</body>
</html>
7、父级.appendChild、父级.insertBefore、父级.replaceChild 如果要添加或者插入或者替换的元素都是该父级下已有的元素，那么该元素都是被 剪切 到目标位置的。
8、动态数组：只要定义一次，再去修改节点时，同样能够重新计算节点的新length。
9、在循环中操作DOM，会因为动态数组的原因，改变了操作DOM之后的结果。
10. 操作元素属性的两种方式：中括号（[]） 或 点（.）
11. 操作元素属性的第三种方式
a. getAttribute():获取属性，也可以获取自定义在行间的属性
注意：可以获取到src,href,url等的相对地址。
b. setAttribute(): 设置属性
c. removeAttribute:删除属性
注意：在ie低版本下属性名应避开关键字
--- 实例：图片的按需加载方式
JS核心知识点：DOM\BOM\EVENT的更多相关文章
- JS核心之DOM操作 下
目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法 接上篇,我们先来看常用的三 ...
- JS核心之DOM操作 上
JS一个重要功能就是操作DOM, 改变页面显示. 目录: 1.基本概念 2.节点类型 3.节点关系 4.节点操作 基本概念 DOM全称为Document Object Model ,即文档对象模型,是 ...
- JS核心知识点梳理——闭包
闭包 闭包这个东西咋说呢,不同的程序员,不同的资料都有不同的解释,你可以把它理解成一个函数,也可以把它理解函数+执行环境. 我们这里不纠结闭包的定义,而是关注闭包的现象,应用,再结合相关面试题去攻克它 ...
- HTML5学习笔记（十六）：原型、类和继承【JS核心知识点】
理解原型 在JavaScript中,只要声明了一个函数,就会为该函数创建一个名为prototype的属性,该属性指向当前函数的原型对象. 而函数的原型对象有一个constructor属性,该属性指向刚 ...
- js初级DOM&BOM知识点总结
第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...
- 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- javascript中的一些核心知识点以及需要注意的地方
前言 近期杂事甚多,这些事情的积累对知识体系的提升有好处,但是却不能整理出来,也整理不出来 比如说我最近研究的Hybrid在线联调方案便过于依赖于业务,就算分享也不会有人读懂,若是抽一点来分享又意义不 ...
- DOM&BOM笔记
day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...
- JS重要知识点
这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...
随机推荐
- Timezone offset does not match system offset: 0 != -32400. Please, check your config files
apscheduler使用uWSGI的mule模块部署的时候报错, 因为系统时区和代码运行时区不一样导致. 解决办法:在初始化的时候指定上海的时区 scheduler = BlockingSchedu ...
- 6.Linux查看哪个进程占用磁盘IO
$ iotop -oP命令的含义:只显示有I/O行为的进程
- 环信联合创始人： Saas敏捷开发实践！
马晓宇 --环信联合创始人/执行总裁 我们是一个做云服务的创业公司,所以我就云服务创业公司的角度,来谈谈我们是怎么去实践敏捷开发的.确切地说,就是讲讲我们这几年的这些教训... 1-创业公司敏捷开发流 ...
- linux - 卸载python
2019年10月15日12:05:42 [root@spider1 bin]# rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps ##强制 ...
- scala的泛型浅析
1. scala泛型浅析 package com.dtspark.scala.basics /** * 1,scala的类和方法.函数都可以是泛型. * * 2,关于对类型边界的限定分为上边界和下边界 ...
- Windows 下 nvm, node, npm 的下载、安装与配置
主要解决的问题 下载安装完 nvm 和 node 后,缺失 npm 文件 执行 jasmine 等命令时提示「不是内部或外部命令...」及全局变量的设置 下载与安装 一.nvm github 下载地址 ...
- 关于页面数据未保存改变路由（beforeunload，beforeRouteLeave）
一下内容为笔者个人理解,如有出入还请大佬指出不胜感激 页面有数据未保存,用户离开页面分为两种 1 . 直接关闭浏览器标签 或者点击浏览器后退按钮 离开当前页面 2. 在页面内改变路由,或则刷新页面(不 ...
- AOP底层实现原理，动态代理如何动态
代理 指定另外一个主体代替原来的某个主体去执行某个事物 代理执行的人 需要代理的人 需要代理的事情是一定要做的 但是被代理的人没有时间或自己做的不专业 静态代理: 父母朋友帮忙物色找对象 代理人掌握需 ...
- SpringCloud之RabbitMQ安装
本文介绍Linux以及MAC OS下的RabbitMQ安装及配置: 一.Linux环境下的RabbitMQ安装(CentOS) 1.安装ErLang Erlang(['ə:læŋ])是一种通用的面向并 ...
- Django框架orm
一.django目录 二.登录注册 三.三件套 四.orm简介 五.基于orm的用户登录 一.django目录 -settings -urls -views -强调:setting中的'django. ...