项目开发中JavaScript和CSS的知识补漏

1. 元素节点分为文本节点，元素节点等，innerHTML会把某个元素下所有HTML代码重写，而不单单是文本

<Col span={3}>
    <Button type="primary" onClick={this.searchForData}>查询</Button>
    <span className="fold-arrow-wrap" onClick={this.foldVariableWrap}>
      收起
      <i className="icon font_family icon-arrow-line-down-defa"></i>
    </span>
</Col>

2. 事件对象是自动传入，currentTarget是事件绑定的节点

3. childNodes可以获取元素下所有节点，单独的空格也是一个文本节点；childNodes是一个类数组。nodeValue可以设置节点的值。

foldVariableWrap=(e)=>{
    let target=e.currentTarget;
    let wrapEle=document.getElementById("select-fold-wrap");
    if(target.innerText==="展开"){
        target.childNodes[0].nodeValue="收起";
        target.childNodes[1].setAttribute("class","icon font_family icon-arrow-line-down-acti");
        wrapEle.style.height="auto";
    }else{
        target.childNodes[0].nodeValue="展开"
        target.childNodes[1].setAttribute("class","icon font_family icon-arrow-line-down-defa");
        wrapEle.style.height="100px";
    }
}

4. 获取元素宽度，style.width只能获取写在元素style属性里面的宽度，而不能获取css样式表设置的宽度；offsetWidth可以，并且可以获取宽度设置为百分比元素的动态实际宽度

image.png
有时间再看一下jQuery关于获取width和height的源码
获取元素CSS值之getComputedStyle方法熟悉https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

6. const定义的对象属性是可以被改变的

const是用来定义常量的，而且定义的时候必须初始化，且定义后不可以修改。当保存对象是引用类型的，const定义的变量中保存的仅是对象的指针，这就意味着，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。

7. Table td 不换行 超出省略号

table{
    width:30em;
    table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

或者td里面放一个div 设置min-height 超出hidden

8. inline-block设置overflow:hidden会发生什么

• 使父元素意外增高

  
  image.png
  

  如图可见，span设置高度为40px，但是其父元素却高于40px

• 导致相邻元素向下偏移

解决方法

• inline-block元素添加vertical-align: bottom；
• 将inline-block设为block

9. React组件中注册的事件要在组件UNmount组件中手动注销

10. DOM元素中的contains方法 : 如果A元素包含B元素，则返回true

11. 当className为不可设置时，使用classLIst操作类名，classList具有add和remove等方法；https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList