JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

时间:2022-04-19 05:31:18

JS DOM节点:

在JS DOM中节点的关系被定义为节点的属性:

通常有以下几种节点之间的关系:

(这里的关系是所有浏览器都支持的)

  • parentNode    父节点
  • childNodes    子节点
  • firstChild    父节点里的第一个子节点
  • lastChild     父节点里的最后一个子节点
  • nextSibling    与子节点并列的下一个兄弟节点
  • previousSibling   与子节点并列的上一个兄弟节点

火狐与谷歌支持而ie8不支持的节点关系有:

previousElementSibling
nextElementSibling
firstElementChild
lastElementChild

在实际工作中,我们可以对这些ie8不支持,但是谷歌与火狐都支持的节点属性进行封装,使他们能够在各个浏览器中都能够兼容。

4个封装实例:

/**
* 获得当前对象的上一个标签元素
* @param obj
* @returns {*}
*/
function getPreviousSibling(obj){
if(obj.previousElementSibling){ // previousElementSibling能够直接获得上一个兄弟标签节点
return obj.previousElementSibling;
}else {
var node = obj.previousSibling;//是所有的浏览器都支持的,但是得判断节点类型,previousSibling不能直接获得类型为标签的元素,所以需要判断它的节点类型。
while(node&&node.nodeType!=1){ //判断节点上一个节点是否存在与节点的类型是否是标签类型,如果不是就使用while循环继续循环判断节点直到获得为止
node = node.previousSibling;
}
return node; //将找到的标签节点返回
}
}
/**
* 获取当前元素的兄弟标签节点的函数
* @param obj
* @returns {*}
*/
function getNextSibling(obj){
if(obj.nextElementSibling){ // 火狐谷歌都支持的,只会获得标签兄弟节点,IE8不支持
return obj.nextElementSibling;
}else {
var node = obj.nextSibling;// nextSibling是所有的浏览器都会支持的,但是会获得文本节点,IE8及之前的浏览器会忽略空白文本节点
while(node&&node.nodeType!=1){
node = node.nextSibling;
}
return node;
}
} /**
* 获得兼容性的当前对象的第一个子标签节点
* @param obj
* @returns {*}
*/
function getFirstChild(obj){
if(obj.firstElementChild){
return obj.firstElementChild;//将获取到的第一个子节点元素返回
}else {
var node = obj.firstChild;//获得当前对象的第一个子节点,但是这个节点有可能是文本节点
while(node&&node.nodeType!=1){
node = node.nextSibling;
}
return node;
}
} /**
* 获得当前对象的最后一个子标签节点
* @param obj
* @returns {*}
*/
function getLastChild(obj){
if(obj.lastElementChild){
return obj.lastElementChild;
}else {
var node = obj.lastChild;
while(node&&node.nodeType!=1){
node = node.previousSibling;//当前对象的上一个兄弟姊妹节点
}
return node;
}
}

克隆节点:

cloneNode(true) 这种情况是表示克隆节点的所有内容(标签+标签里的内容);

cloneNode(false) 这种情况是仅仅表示克隆了节点的标签;

例:

<body>
<ul id="list">
<li>111111</li>
<li>222222</li>
<li id="li3">333333</li>
<li>444444</li>
</ul>
<script>
var ul = document.getElementById("list");
var li = document.getElementById("li3");
console.log(li.cloneNode(false)); //如果是False的话,仅仅是相当于复制(克隆)了一个标签
console.log(li.cloneNode(true));// 将li标签原样克隆,包含里面的一切信息,包括子节点
console.log(ul.cloneNode(false));
console.log(ul.cloneNode(true)); // 参数为True的时候,是深度克隆,克隆当前对象的一切子节点
// 参数为false的时候,是浅克隆,只会克隆标签,不包含文本信息
</script>

Dom中Style常用的一些属性:

display(none/block):控制元素的显示,不占据原来在标准流中的位置;

visibility(visible/hidden):控制元素的显示,占据原来在标准流之中的位置

backgroundColor: 控制元素的背景颜色

backgroundImage: 控制元素背景图片的路径

color:  控制前景颜色

width:控制元素的宽度

height:控制元素的高度

border:控制边框的属性

position:控制元素使用何种定位

left/top:控制元素的定位之后的偏移(注意最后不要忘记带上单位px)

box.style.position="absolute";
box.style.left="200px";

zIndex:控制元素的层级(案例:许愿墙点击哪个卡片哪个在最上面显示)

filter:控制元素的透明度(ie8支持)

box.style.filter="alpha(opacity=30)";

而火狐与谷歌支持的是:

box.style.backgroundColor="rgba(120,120,120,.3)";

补充:下拉列表中<option></option>的selected属性

selected 属性可设置或返回选项的 selected 属性的值。

该属性设置选项的当前状态,如果为 true,则该选项被选中。该属性的初始值来自 <option> 的 selected 属性。

抽奖案例:
<body>
<select name="" id="sel">
<option value="">一等奖</option>
<option value="">二等奖</option>
<option value="">三等奖</option>
<option value="">四等奖</option>
<option value="">五等奖</option>
<option value="">六等奖</option>
<option value="">七等奖</option>
<option value="">八等奖</option>
<option value="">九等奖</option>
</select>
<input type="button" value="抽奖" id="btn"/>
<script>
var sel=document.getElementById("sel");
var options=sel.children;
var btn=document.getElementById("btn");
btn.onclick=function(){
var index=Math.floor(Math.random()*options.length);
options[index].selected=true;
}
</script>

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

在 DOM 中,属性也是节点。与元素节点不同,属性节点拥有文本值。

获取属性的值的方法,就是获取它的文本值。

getAttribute() 方法返回属性的值。

getAttributeNode() 方法返回属性节点。

setAttribute() 方法用于改变属性的值或创建新属性。

removeAttribute() 方法删除指定属性。

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

createElement() 方法创建新的元素节点;

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

removeChild() 方法删除指定节点。当一个节点被删除时,其所有子节点也会被删除。

insertBefore() 方法用于在指定的子节点之前插入节点。在被添加的节点的位置很重要时,此方法很有用。

replaceChild() 方法用其他节点替换某个子节点。如成功,该方法返回被替换的节点,如失败,则返回 null。