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代码预解析原 ...
随机推荐
- 统计学习方法 | 感知机 | python实现
感知机是二类分类的线性分类模型,利用随机梯度下降法对基于误分类的损失函数进行极小化. 书中算法可以将所有样本和系数向量写成增广向量的形式,并将所有负样本乘以-1,统一形式,方便计算. (1)训练数据集 ...
- pthread_cond_t
条件锁pthread_cond_t (1)pthread_cond_wait的使用 等待线程1. 使用pthread_cond_wait前要先加锁2. pthread_cond_wait内部会解锁,然 ...
- 【kmp】似乎在梦中见过的样子
参考博客: BZOJ 3620: 似乎在梦中见过的样子 [KMP]似乎在梦中见过的样子 题目描述 「Madoka,不要相信QB!」伴随着Homura的失望地喊叫,Madoka与QB签订了契约. 这是M ...
- css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
- 调用打码平台api获取验证码 (C#版)
一.打码平台很多,这里选择两个:联众和斐斐 联众开发文档: https://www.jsdati.com/docs/guide 斐斐开发文档: http://docs.fateadm.com/web/ ...
- SqlServer 附加数据库出错
方法一 找到要添加数据库的.mdf文件,点击右键,选择属性 在属性页面点击安全,选择Authenticated Users,单击编辑 Authenticated Users权限中选择完全控制,点击确定 ...
- includes()函数的用法
在ES5,Array已经提供了indexOf用来查找某个元素的位置,如果不存在就返回-1,但是这个函数在判断数组是否包含某个元素时有两个小不足,第一个是它会返回-1和元素的位置来表示是否包含,在定位方 ...
- 【转】js中的原型
原文链接:https://blog.csdn.net/u012468376/article/details/53121081 一.什么是原型原型是Javascript中的继承的基础,JavaScrip ...
- RabbitMQ的持久化（六）
RabbitMQ的持久化主要体现在三个方面,即交换机持久化,队列持久化及消息持久化 注意,因公司使用php-amqplib来实现RabbitMQ,故之后举例说明的代码均使用的php-amqplib,而 ...
- 程序员和IT员不能错过的网站
前言本文收录一些值得收藏的开发相关网站. 目录一.搜索引擎二.在线课程三.在线练习四.在线工具箱五.在线编译器六.技术论坛或社区七.音乐放松一下 一.搜索引擎搜索引擎大家最熟悉不过,本没有必要列出,但 ...