JavaScript基础笔记（六）

这个系列记录之前学习JS基础的一些知识点和笔记，希望会对一些刚开始学习JavaScript的入门者有用，若有错误与不当之处欢迎指出与纠正！！！

五十一 获取dom的方法
Getelementbyid
Getelementbyclass
Getelementbytagname
Getelementbyname
Queryselector
五十二 触发事件
Btn.οnclick=deal;
Function deal(){
Alert(“点我干啥？”)；
}
Onload（）文档和图片加载完成后加载它
五十三 常用的document对象方法
Open() 打开一个流，以收集来自任何ducument.write ()或document.writeIN()方法的输入
write() 向文档写HTML表达式或JavaScript代码
writeIn等同于write ()方法，不同的是在每个表达式之后写一个换行符
五十四 DOM
DOM的数据结构（树状）：找对象（元素）、设置元素的属性、设置元素的样式、动态创建和删除元素、事件-触发响应
节点的获得：节点的访问关系。是以属性的方式存在的；DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对他们进行访问
五十五 父节点
父节点（parentNode）：调用者就是节点，一个节点只有一个父节点；
节点.parentNode
//1.通过子盒子设置父盒子的背景元素
Var btn= document.getelementbyclassname(“btn”)[0];
Btn.οnclick=function(){
Var span=document.getelementbyid(“span”);
Var box=span.parentNode;
Box.style.backgroundColor=”red”;
}
五十六 兄弟节点
单词普及：sibling（兄弟）、next（下一个）、previous（上一个）
下一个兄弟节点：nextsibling调用者是节点（IE678中指下一个元素节点—标签）在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点经常会获取到空节点#text“”）、nextelementsibling在火狐谷歌IE9+都指的是下一个元素节点火狐谷歌IE9以后用nextelementsibling
上一个兄弟节点：previoussibling调用者是节点（IE678中指下一个元素节点—标签）在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）、previouselementsibling在火狐谷歌IE9+都指的是下一个元素节点以后用previouselementsibling
下一个兄弟节点=节点.nextelementsibling || 节点.nextsibling
上一个兄弟节点=节点.previouselemenesibling ||节点.previoussibling
五十七 获取子节点
1.第一个子节点：firstchild调用者是父节点（IE678中指第一个子元素节点—标签）在火狐谷歌IE9+以后都指的是第一个子节点（包括空文档和换行节点）、firstelementchild在火狐谷歌IE9+都指的是第一个子元素节点火狐谷歌IE9以后用firstelementchild
2.最后一个子节点:lastchild调用者是父节点（IE678中指第一个子元素节点—标签）在火狐谷歌IE9+以后都指的是第一个子节点（包括空文档和换行节点）、lastelementchild在火狐谷歌IE9+都指的是第一个子元素节点火狐谷歌IE9以后用lastelementchild
3.所有子节点:childnodes他是标准属性（它返回指定元素的子元素组合，包括HTML节点，所有属性，文本节点，注意：火狐，谷歌等高版本会把换行也看作是子节点）获取所有子节点子节点数组=父节点.childNodes。nodetype1表示的是元素按（标签）节点；nodetype2表示的是属性节点；nodetype==3表示的是文本节点、children非标准属性（他返回的是指定元素的子元素集合，但他只返回HTML节点，不返回文本节点，虽然不是标准的DOM属性，但他和innerHTML方法一样，得到了几乎所有浏览器的支持）获取所有子节点子节点数组=父节点.children。用得最多
4.获取任意兄弟节点*节点自己.parentNode.children[index]通过index索引可以获取任意一个兄弟节点
五十八 节点增删改查
1.创建节点：document.createElement(“”); box.append()\插入在box的最后面 box.insertbefore(参数1 ，参数2)\把参数1插入在参数2的前面
2.删除节点 节点.parentNode.removeChild();//获取到父节点，删除父节点下面的某个节点、 节点.remove();//删除自己
3.复制节点 oldNode.cloneNode(true)想要复制的节点调用函数cloneNode（），得到一个新的节点，方法内部可以传参，一般是true，深层复制，如果是false，只复制节点本身。
新节点=要复制的节点.cloneNode(参数)；参数可选复制节点false浅拷贝（只拷贝一层节点本身）；true深拷贝（把节点本身以及节点里面的内容都拷贝出来）
五十九 节点属性的操作
节点属性（节点.属性）
获取：getAttribute(名称) img.getAttribute(“属性”，“属性值”)
设置：setAttribute(名称、值) img.setAttribute(“属性”，“属性值”)
删除：removeAttribute(名称)
注意：IE6、7、8不支持
六十 图片的切换
Window.οnlοad=function(){
//获取需要的标签
Var icon=document.getelementbyid(“icon”);
Var prev=document.getelementbyid(“prev”);
Var nxt=document.getelementbyid(“next”);
//监听按钮的点击
Var maxIndex=9,minIndex=1,currentIndex=minIndex;
Prev.οnclick=function(){
If(currentIndex === minIndex)
{ currentIndex = maxIndex;
} else { // 正常情况
currentIndex --;
}
Icon.setAttribute(“src”,”img/icon_0” + currentIndex + ”.png”);
};
Next.onclick = function(){
If(currentIndex === maxIndex){
CurrentIndex=minIndex;
}else{//正常情况
CurrentIndex++；
}
Icon.setAttribute(“src”,”img/icon_0”+currentIndex+”.png”);
}
}

• 点赞
• 收藏
• 分享
• 文章举报