day10 DOM 补充

表格的动态创建

5) 各种文本框

简单的说innerHTML和outerHTML、innerText的不同之处在于：

• innerHTML 常用，可以用来拼接HTML字符串

  • 将元素中所有的内容都获取到。包括HTML标签 但是不包括自身标签。

• innerText

  • 将元素的内容获取出来不包括HTML标签

• outerHTML

  • 将自身以及子元素所有的内容都获取出来。 包括HTML标签， 包括自身标签。

    
        
        
    
    
        

            今天天气太冷了
        
        

            
        
    

6）自定义属性以及属性的读写

方法1：

//属性的读
    console.log(oDiv.id);//box  
// 属性的写
    oDiv.id='xixi';
    console.log(oDiv.id);//xixi
//自定义属性
    oDiv.index =2;
    console.log(oDiv.index);//2

方法2：

setAttribute("属性名称","属性值名称")

getAttribute("属性名称") : 返回属性名称对应的属性值

// 属性的读
    console.log(oDiv.getAttribute('id'));
// 属性的写
    oDiv.setAttribute('class','haha');//自定义属性
    console.log(oDiv.getAttribute('class'));

7) className直接为元素添加类的样式

oLis[j].className = "new-style";

8) 获取非行内样式

• 行内样式：行间样式就是写在标签体内的样式 。如

  在这里color样式就是行间样式。

  • 行内样式属性值的读写

• 非行间样式：非行间样式就是指不是写在标签体内的style属性的样式。如内的定义的样式或引用的外部css文件都是非行间样式。

  • 非行内的写与行内相同
  • 非行内的读：getComputedStyle(Dom对象,false)[属性名]:返回Dom对象所对应的属性值

9) insertBefore：添加到一个节点前面

• 父节点.insertBefore(要添加的子节点,参照节点)
• 参照节点如果为null 那就和appendChild()一样

    
        
        
    
    
        

            
淼淼
            
鑫鑫
            
槑槑
        
        添加
    

10) offsetWidth/offsetHeight/offsetLeft/offsetTop

　　注意： offset 相关的属性只能读，不能写

• style.left 返回字符串 如20px, offsetLeft返回数值 如20
• style.left写,offsetLeft只读
• style.left必须要事先定义，否则值为空

11) window.onscroll事件

• 获取滚动条移动的垂直距离， 兼容问题写法

  • document.body.scrollTop|| document.documentElement.scrollTop;

回到顶部的案例：

    
        
        
        
    
    
        回到顶部