Javascript操作DOM的API及兼容性相关笔记（三）
1.数组的那些遍历方法forEach、map、filter、every、some，在IE678中不存在，dom对象的属性操作方法getAttribute、setAttribute、removeAttribute在IE678中也不存在，通过控制台打印的时候发现，返回的是一个Object类型的{}，也就是空对象。
◆js兼容性封装代码
/**
* 功能：根据id获取元素节点
* @param id
* @returns {Element}
*/
function getelebyid( id ) {
return document.getElementById(id);
}
//******************获取子元素节点*********开始********//
/**
* 功能：获取第一个子元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getfirstchild( ele ) {
return ele.firstElementChild || ele.firstChild;
}
/**
* 功能：获取最后一个子元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getlastchild( ele ) {
return ele.lastElementChild || ele.lastChild;
}
/**
* 功能：获取对应索引值的子元素节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getchildofindex( ele, index ) {
return ele.children[index];
}
/**
* 功能：获取所有的子元素节点
* @param ele
* @returns {Array}
*/
function getallchild( ele ) {
var newArr = [];
var oldArr = ele.children;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i].nodeType === 1) {
newArr.push(oldArr[i]);
}
}
return newArr;
}
//******************获取子元素节点*********结束********//
//******************获取兄弟元素节点*********开始********//
/**
* 功能：获取上一个兄弟元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getpresibling( ele ) {
var pre = ele.previousElementSibling || ele.previousSibling;
return pre;
}
/**
* 功能：获取下一个兄弟元素节点
* @param ele
* @returns {Element|*|Node}
*/
function getnextsibling( ele ) {
return ele.nextElementSibling || ele.nextSibling;
}
/**
* 功能：获取对应索引值的兄弟元素节点
* @param ele
* @param index
* @returns {*|HTMLElement}
*/
function getsiblingofindex( ele, index ) {
return ele.parentNode.children[index];
}
/**
* 功能：获取所有的兄弟元素节点（不包括自己）
* @param ele
* @returns {Array}
*/
function getallsibling( ele ) {
var newArr = [];
var oldArr = ele.parentNode.children;
for (var i = 0; i < oldArr.length; i++) {
if (oldArr[i] != ele) {
newArr.push(oldArr[i]);
//newArr[newArr.length]=oldArr[i];
}
}
return newArr;
}
//******************获取兄弟元素节点*********结束********//
◆html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象的访问关系兼容性函数封装</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
width: 200px;
margin:70px 50px;
overflow: hidden;
}
li {
list-style:none;
width: 100px;
height: 100px;
background-color: #0f0;
margin:10px auto;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li id="li3"></li>
<li></li>
<li></li>
</ul>
</div>
<script src="1.对象的访问关系兼容性工具类(tools).js"></script>
<script>
// //获取当前节点
// var box=document.getElementById("box");
//
// //获取父节点
// box.parentNode;
//
// //获取上一个兄弟节点
// box.previousSibling;
// box.previousElementSibling;
//
// //获取下一个兄弟节点
// box.nextSibling;
// box.nextElementSibling;
//
// //获取第一个子节点
// box.firstChild;
// box.firstElementChild;
//
// //获取最后一个子节点
// box.lastChild;
// box.lastElementChild;
//
// //获取子节点
// box.childNodes;
// box.children;
var li=getelebyid("li3");
li.style.backgroundColor="#f00";
getpresibling(li).style.backgroundColor="#00f";
getnextsibling(li).style.backgroundColor="#ff0";
var parent=li.parentNode;
getfirstchild(parent).style.backgroundColor="#0ff";
getlastchild(parent).style.backgroundColor="#f0f";
var arr=getallsibling(li);
arr.forEach(function(element,index,array){
element.style.backgroundColor="#000";
});
</script>
</body>
</html>2.dom元素创建的三种方式
◆使用document.write();这种方式会覆盖原来的页面的全部内容，慎用。
◆使用innerHTML属性，这种方式如果是持续添加的话，那么就使用+=，如果想覆盖原来的话，就直接=，绑定属性和内容比较方便。(节点套节点)。
◆使用document.createElement("li");这种方式是最纯正的，效率不高，因为还要添加到某个节点里面，但是创建的这个元素可以当作一个真正的页面元素来使用，定数量的时候一般用它。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom元素创建的三种方式</title>
</head>
<body>
<button id="btn1">创建第一种创建元素的方式</button>
<button id="btn2">创建第二种创建元素的方式</button>
<button id="btn3">创建第三种创建元素的方式</button>
<ul id="ul01">
</ul>
<ul id="ul02">
<li id="li01">指定目标节点</li>
</ul>
<script>
//第一种方式 document.write();这种方式会覆盖原来的页面的全部内容
btn1.onclick=function(){
document.write("<li>第一种创建元素的方式创建的元素</li>");
}
//第二种方式 innerHTML; innerText无法识别标签
btn2.onclick=function(){
ul01.innerHTML+="<li>第二种创建元素的方式创建的元素</li>";
}
//第三种方式 document.createElement();
btn3.onclick=function(){
var li=document.createElement("li");
li.innerHTML="第三种创建元素的方式创建的元素";
//把一个元素添加到一个元素内部的最下面
ul02.appendChild(li);
//把一个新元素添加指定节点的前面
ul02.insertBefore(li,li01);
console.log(li.innerText);
console.log(li.textContent);
}
</script>
</body>
</html>3.通过dom对象的第一种获取属性的方式 对象.属性名和对象["属性名"],只能够获取标签上的行内属性，例如对象.style并不能获取内嵌的<style type="text/css"></style>标签对中的css样式属性和外链的<link re="stylesheet" href="1.css"/>中的css样式属性，但可以获取页面标签中的行内css样式，页面标签行内css样式通过style属性来获取，对象.style也是一个对象，并不是一个字符串，如果要获取字符串的话，可以通过对象.style.cssText来获取css样式文本字符串，也能通过对象.style.cssText来设置css样式文本字符串的值，jquery中的css方法就是通过cssText来实现的，cssText其实就是页面标签的style属性的文本值，通过它可以快速的覆盖原来的行内样式，获取和设置对象.style中的样式属性使用的命名规则是驼峰命名法而不是css样式里的-横杠，比如css样式中line-height转换为页面标签对象的style对象的属性时是对象.style.lineHeight。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style属性的注意点</title>
<style type="text/css">
#box {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: #0f0;"></div>
<script>
//1.对象的style属性也是一个对象
var style=box.style;
console.log(style);
//2.style属性对象只能够获取行内的样式并不能获取内嵌和外链的样式
console.log(style.backgroundColor);//如果有 则会输出属性值的字符串
console.log(style.border);//如果是行内样式中没有的属性 则会返回空字符串
//3.style属性对象里的成员使用的都是驼峰命名法，并并非是全小写加-横杠
console.log(style.width);
console.log(style.height);
//4.如果想通过设置样式时一次性设置多个，可以使用style属性对象的cssText属性来设置，通过设置字符串的方式来设置css样式,和直接设置多个行内样式方式一样,每一次直接设置cssText都会覆盖掉原来标签设置style属性中的字符串。
console.log(style.cssText);
style.cssText="width:50px;height:50px;";
</script>
</body>
</html>4.盒子隐藏的方式 display visibility opacity position
◆box.style.display="none";隐藏 不占位置
◆box.style.visibility="hidden";隐藏 占位置
◆box.style.opacity="0";和下面一组 隐藏占位置box.style.filter="alpha(opacity=0)";只在IE678中有效
◆box.style.position="absolute";和下面一组 隐藏不占位置，box.style.top="-9999px";
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>各种隐藏盒子</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
box.onclick= function ( ) {
box.style.display="none";//隐藏 不占位置
box.style.visibility="hidden";//隐藏 占位置
box.style.opacity="0";//和下面一组 隐藏占位置
box.style.filter="alpha(opacity=0)";//只在IE678中有效
box.style.position="absolute";//和下面一组 隐藏不占位置
box.style.top="-9999px";
}
</script>
</body>
</html>5.元素的增加、删除、替换、克隆
◆增加：appendChild(newnode);追加新节点insertBefore(newnode,oldnode);把新节点插入到老节点之前
◆删除：removeChild(oldnode);移除老节点
◆替换：replaceChild(newnode,oldnode);使用新节点替换掉老节点
◆克隆：cloneNode();不完全克隆，cloneNode(true);完全克隆。
◆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的创建、增加、删除、替换、克隆</title>
</head>
<body>
<ul id="ul01">
<li id="li01">我是指定目标节点li01</li>
<li id="li02">我是指定目标节点li02</li>
<li id="li03">我是指定目标节点li03</li>
<li id="li04">我是指定目标节点li04</li>
</ul>
<script>
//元素的创建、增加、删除、替换、克隆
//元素的创建三种方式
//1. document.write("<li></li>") 不常用 会覆盖掉原来的内容
//2. ul01.innerHTML="<li></li>"; 常用 当出现节点套节点的时候用这个特别方便的，绑定属性什么的也是很快的，直接书写html标签即可
//3. document.createElement("li");常用，当指定节点数目时用这个很方便，但是节点套节点会有点麻烦，那个时候推荐是innerHTML
//元素的增加
var li=document.createElement("li");
li.innerHTML="我是li";
//追加
//ul01.appendChild(li);
//把li插入到li01中去
//ul01.insertBefore(li,li01);
//元素的删除 从ul01删除掉li01
//ul01.removeChild(li01);
//元素的替换 把ul01中的 li替换成li01
//ul01.replaceChild(li,li01);
//元素的克隆
var cloneUl1= ul01.cloneNode();
var cloneUl2= ul01.cloneNode(true);
console.log(cloneUl1);//空壳的ul
console.log(cloneUl2);//完整的ul
</script>
</body>
</html>6.如果移动子节点，不要使用正的for循环，因为父元素中的子节点的长度会随着移动而减少，所以需要使用反for循环。
◆选择水果移动到另一个篮子里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择水果后移动到另一个水果篮</title>
<style type="text/css">
select {
width: 150px;
height: 200px;
background-color: #0f0;
}
</style>
</head>
<body>
<select name="" size="10" id="sle01" multiple>
<option value="0">香蕉</option>
<option value="1">橘子</option>
<option value="2">苹果</option>
<option value="3">鸭梨</option>
<option value="4">海豚</option>
</select>
<button>>>></button>
<button><<<</button>
<button>></button>
<button><</button>
<select name="" size="10" id="sle02" multiple>
</select>
<script>
//需求：当点击>>>按钮时 就把sle01中所有的option全部移动到sle02中,<<<也是类似， 当点击>是，就把sle01中选中的option全部移动到sle02中，<也是类似。
//思路：点击>>>或者<<<时，获取所有的option，使用反循环添加选项，如果是><时，把当前选中的项 使用循环添加项
//步骤：
//1.获取事件源及相关元素
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源及相关元素
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
var btn3 = document.getElementsByTagName("button")[2];
var btn4 = document.getElementsByTagName("button")[3];
//2.绑定事件
btn1.onclick = function () {//<<<
//3.书写事件驱动程序
var selects = sle01.children;
//这个循环不行，因为元素数组的节点会减少 所以只能使用反循环
// for(var i=0;i<selects.length;i++){
// sle02.appendChild(selects[i]);
// }
for (var i = selects.length - 1; i >= 0; i--) {
sle02.appendChild(selects[selects.length - 1 - i]);
}
}
//>>>
btn2.onclick = function () {
//3.书写事件驱动程序
//3.书写事件驱动程序
var selects = sle02.children;
//这个循环不行，因为元素数组的节点会减少 所以只能使用反循环
// for(var i=0;i<selects.length;i++){
// sle02.appendChild(selects[i]);
// }
for (var i = selects.length - 1; i >= 0; i--) {
sle01.appendChild(selects[selects.length - 1 - i]);
}
}
//>
btn3.onclick = function () {
moveSelectedNode(sle01, sle02);
}
//<
btn4.onclick = function () {
moveSelectedNode(sle02, sle01);
}
//选中所有项
function selectAllNode( obj ) {
var objchildrens = obj.children;
for (var i = 0; i < objchildrens.length; i++) {
objchildrens[i].selected = true;
}
}
//移动选中后的项
function moveSelectedNode( obj, toobj ) {
var newArr = []
var objchildrens = obj.children;
for (var i = 0; i < objchildrens.length; i++) {
if (objchildrens[i].selected) {
newArr.push(objchildrens[i]);
}
}
for (var j = 0; j < newArr.length; j++) {
toobj.appendChild(newArr[j]);
}
}
</script>
</body>
</html>