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>

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

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

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

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

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

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

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

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

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

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

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

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

  1. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  2. java 学习笔记——类之间的关系之封装、继承与多态的详解

    封装 一个封装的简单例子 封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联 ...

  3. Neo4j删除节点和关系、彻底删除节点标签名

    https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...

  4. 【学习】js学习笔记：对象的遍历和封装特性

    1.对象的属性访问: 对象.属性 对象[属性],但中括号中必须是字符串 2.属性的遍历: for in方法举例: var ren={}; ren.name="名字"; ren.ea ...

  5. K3精益版给物料添加属性，并在BOM中新增字段引用该属性

    1.给物料新增属性 打开“系统--基础资料--公共资料--核算项目管理”,然后双击物料,弹出核算项目类别-修改对话框.再点新增按钮: 输入你想新增字段的类型,长度,想要放置的位置. 相关属性里面选的是 ...

  6. 熟悉JS中的常用选择器及属性、方法的调用

    选择器.属性及方法调用的配合使用: <style>            #a{                width: 200px;                height: 1 ...

  7. JS中Object常用的一些属性和方法

    1⃣️属性 刚接触prototype.constructor.proto这三个玩意儿的时候,是不是有点儿傻傻分不清楚的感觉?下面来简单的说下... 举

  8. 关于那些Android中不常用的设置属性

    很多在manifest中的属性我们经常遗忘了它们,或者经常看到但又不是很明白它的作用.那么在这里我就拿了一些属性简单的解释一下,防止以后碰到却不知道其中的意思.不是很全,以后会断断续续的补充吧 一.a ...

  9. html中一些常用标签及属性

    html中标签分为块级标签和行级标签 块级标签常用的有 <div> <p> <h1><hr><pre><table><ul ...

随机推荐

  1. 001_JavaScript 错误 - Throw、Try 和 Catch

    try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 错误一定会发生 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误: 可能是 ...

  2. 2013年第四届蓝桥杯C/C++程序设计本科B组决赛

    1.猜灯谜(枚举) 2.连续奇数和(等差数列) 3.空白格式化(去除空格) 4.高僧斗法(阶梯nim) 5.格子刷油漆(dp) 6.农场阳光 1.猜灯谜 A 村的元宵节灯会上有一迷题:请猜谜 * 请猜 ...

  3. NSIS打包（一）常用概念简介

    1.NSIS简介 官网:http://sourceforge.net/projects/nsis/ 维基百科: http://zh.wikipedia.org/wiki/Nullsoft%E8%85% ...

  4. ubuntu下基于sqlite3后台的php环境的搭建

    最近准备把公司的服务器换成linux 数据库sqlite3 搭建过程记录如下: 1 sqlite3安装.. apt-get install sqlite 2.PHP服务器搭建. apt-get ins ...

  5. 10G R2 参数文件相关

    CLUSTER_DATABASE Property Description Parameter type Boolean Default value false Modifiable No Range ...

  6. loadrunner11遇到的问题汇总及相应的解决方案（持续更新）

    1.在此界面点击Run Load Tests提示: "Can not save the license information because access to the registry  ...

  7. NDK 的开发流程

    1.NDK开发所需要的工具 windows 需要在windows下的环境 把c代码打包成 手机能用的函数库 首先模拟手机的环境 1 NDK .sh linux 批处理文件 .bat windows 头 ...

  8. C++ malloc new 的区别

    1,malloc与free是C++/C语言的标准库函数,new/delete是C++的运算符.它们都可用于申请动态内存和释放内存. malloc实现了在堆内存管理中进行按需分配的机制,但是它不提供在C ...

  9. AbstractQueueSynchronizer

    1.AbstractQueuedSynchronizer(以下简称AQS)是Java并发包提供的一个同步基础机制,是并发包中实现Lock和其他同步机制(如:Semaphore.CountDownLat ...

  10. JavaScript执行bat文件清理浏览器缓存

    function exec() { window.onerror = function (err) { if (err.indexOf('utomation') != -1) { alert('命令已 ...