JS day10 —各种文本及属性样式的读写

1.各种文本：

  1.innerHTML：--------拼接字符串创建html元素，搭建页面

       不包含自身标签的所有内容

  2.innerText：

      纯文本不包含标签

  3.outHTML：

      包含自身标签的所有内容

 整个JS中常用的文本有： 

    1.value——>input type=text

    2.innerHTML——>所有元素的不包括自身标签的内容

2.属性的读写：

1.属性的读写：

语法：

    对象.属性名   (.是域运算符)

	 写：
	 obox.id="hehehe";//id名变成了hehehe
	 读：
	 console.log(obox.id);//读id名为box

2.自定义属性的读写：

读：

 getAttribute("属性名称") 

     返回属性名称对应的属性值

写：

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

// var oBox =document.querySelector("#box");
	// oBox.yingying=123;//添加新属性yingying，值为123
	// console.log(oBox.yingying);
	// console.log(oBox.getAttribute("yingying"));//null 错的
	
	// oBox.setAttribute("a","666");
	// console.log(oBox.getAttribute("a"));
	// console.log(oBox.a);//undefined 错的

 结论：添加自定义属性时，必须用相应的方式读写，不然出不来值

           用什么方法添加的就用什么方法读写

3.样式的读写:

  1.行内样式，非行内样式的写：

      dom对象.style.属性名=属性值;

  2.行内样式与非行内样式的读：

     1.行内样式的读：

       直接 打点

 var obox=document.querySelector("#box");
	 console.log(obox.style.width);//100px

    2.非行内样式的读：

getComputedStyle(dom对象，false）["属性名"]

   返回属性值。

 var obox1=document.querySelector("#box1");
	 console.log(obox1.style.backgroundColor);//什么都没有
	
	 console.log(getComputedStyle(obox1,false)["backgroundColor"]);//可以读出背景颜色

4.DOM的新添API

   insertBefore：--------添加到节点之前

      父节点.insertBefore(目标节点,参照节点)

       将目标节点添加至参照节点之前

var otext =document.querySelector("input");
	var obtn =document.querySelector("button");
	var oul=document.querySelector("ul");
	obtn.onclick=function(){
		var oli=document.createElement("li");
		oli.innerHTML=otext.value;
		oul.insertBefore(oli,oul.children[2]);//给ul的第三个li前在填一个li
		// oul.insertBefore(oli,null);//等价与appendChild添加
	}

5.offset 相关属性：-------都是纯数字

   1.offsetWidth：元素的宽

    2.offsetHeight：元素的高

    3.offsetLeft：元素距离左边的宽

     4.offsetTop：元素距离顶部的高

6.window.onscroll事件：--------滚动条事件

 兼容性获取滚动条高度：

var _top = document.body.scrollTop || document.documentElement.scrollTop;

******回到顶部：

var oBtn = document.querySelector("#btn");
		oBtn.onclick = function(){
			document.body.scrollTop = document.documentElement.scrollTop = 0;
		}//点击按钮就可以回到顶部