其他分享
首页 > 其他分享> > 夜光带你走进 前端工程师(三十八 jS )

夜光带你走进 前端工程师(三十八 jS )

作者:互联网

夜光序言:

 

 

 

我要做守护骑士,因为我要去守护所有我想要守护的人。

 

 

 

 

 

 

 

 

 

 

 

正文:

 

判断真假

我们用条件语句来判断5大数据类型中的真假;

数据

结论

数字类型

所有数字都是真,0是假

字符串

所有字符串都是真,’ ’串是假

对象

所有对象都是真,null是假

未定义

undefined是假,没有真

访问关系 

各个节点的相互关系

​​​​​​​父节点 

 

 父 :  parentNode         亲的  一层

  

<script>
    window.onload = function(){
        var x = document.getElementById("x");
        x.onclick = function(){
            this.parentNode.style.display = "none";
            // 关掉的是他的 父亲
        }



    }
</script>

​​​​​​​兄弟节点

nextSibling  下一个兄弟    亲的       ie 678 认识

nextElementSibling   其他浏览器认识的     

 

previousSibling   同理  上一个兄弟   

previousElementSibling

我们想要兼容    我们可以合写      ||      或者

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";

 

 必须先写 正常浏览器  后写  ie678  


​​​​​​​子节点 

firstChild    第一个孩子  ie678

firstElementChild  第一个孩子   正常浏览器  

var one.firstElementChild || one.firstChild;   

    

lastChild

lastElementChild


​​​​​​​孩子节点

childNodes    选出全部的孩子

childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点     (嫡出)

火狐 谷歌等高本版会把换行也看做是子节点

 

利用  nodeType == 1   时才是元素节点     来获取元素节点

标签  元素  

 

children   重要  选取所有的孩子 (只有元素节点)

这个更好 跟喜欢它  。 (庶出)

ie 678  包含 注释节点     这个要避免开。

 

 

 

​​​​​​​dom 的节点操作 

 

 新建节点   插入节点   删除节点   克隆节点 等等

 

​​​​​​​创建节点 

  var div = document.creatElement(“li”);

 

   上面的意思就是 生成一个新的  li 标签  

​​​​​​​插入节点 

 

  1.  appendChild();    添加孩子     append 添加的意思

   意思:  添加孩子   放到盒子的 最后面。

  2. insertBefore(插入的节点,参照节点)   子节点  添加孩子

    写满两个参数  

ertBefore(test,childrens[0]);

   放到了第一个孩子的前面  

  如果第二个参数  为 null  则 默认这新生成的盒子放到最后面。

est,null);


​​​​​​​移除节点

removeChild()    孩子节点       

var da = document.getElementById("xiongda");
demo.removeChild(da);

 


​​​​​​​克隆节点

 cloneNode();

 复制节点

 括号里面可以跟参数  , 如果 里面是 true  深层复制, 除了复制本盒子,还复制子节点  

 如果为 false  浅层复制   只复制   本节点  不复制 子节点。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签:三十八,孩子,元素,jS,复制,var,div,节点,夜光
来源: https://blog.csdn.net/weixin_41987706/article/details/90713350