js--dom元素自定义属性

网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:

1)将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。

2)通过window.onload来执行脚本代码。
往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。

window.οnlοad=function(){}，在以上代码中就是使用此种方式为window.onload事件绑定事件处理函数，这里绑定的是一个匿名函数，当然也可以绑定非匿名函数。

 <script>
        /*
         * 代码写在前面
         * */
        /*window.onload=function (){
         var btn=document.getElementById("btn");
         console.log(btn);
         }*/
    </script>

innerText会直接显示（如果内含标签，也会顺带显示）；innerHTML则会解析标签。并且，js只能操作行内样式，例如height，js可以读取却无法操作。

 //操作当前元素的文本值
    /*btn.innerHTML 或者btn.innerText*/
    //btn.innerHTML="点击我"  //如果给的值里面包含标签   自动解析标签
    //btn.innerText="点击我"   //直接显示
    //btn.innerHTML="<span>我是按钮</span>";
    //btn.innerText="<span>我是按钮</span>";
    //样式的相关操作
    //js操作的样式为元素的行内样式
    //btn.style.backgroundColor="red";
    //console.log(btn.style.width);
    //js不能直接操作内嵌或者外部样式
    //console.log(btn.style.height);
    //如何获取内嵌样式或者外部样式
    //console.log(window.getComputedStyle(btn).width);

设置单个样式
注意：设置的是行内样式，样式名采用的是驼峰命名法则。

window.onload = function () {
    var box = document.getElementById("box");
    box.style.width = "300px";
    box.style.backgroundImage = "url(testImg/test01_" + 2 + ".jpg)"
}

设置多个样式
使用 元素节点.style.cssText 来设置多个样式，每个样式由分号( ；)隔开。

window.onload = function () {
    var box = document.getElementById("box");
    box.style.cssText = "width: 300px; background-image: url(
                                         testImg/test01_2.jpg);";
}

js中DOM的自定义属性方法有：
1)设置自定义属性：setAttribute
2)获取自定义属性：getAttribute
3)移出自定义属性：removeAttribute
（通过setAttribute来设置的自定义属性，只能通过getAttribute来获得，不能通过对象.的方式来获得。）

 //js除了以上的这种获取属性方式
    console.log(btn.getAttribute("id"));
    console.log(btn.getAttribute("class"));
    console.log(btn.getAttribute("style"));

    //getAttribute也可以用来获取自定义的属性
    //如何给元素设置自定义属性  ---简化开发
    //规则  data-src
    btn.setAttribute("data-src", "./img/1.jpg");
    //读取自定义属性
    console.log(btn.getAttribute("data-src"));
    //console.log(btn.data - src);   error

js里面数据类型的强制转化:
1)专门用来对付字符串转换数字
parseInt()把一个字符串转换为整数
可以将一个字符串中的有效整数取出来然后转换为Number
但是我们要注意的是parseInt()它读取的规则为从左往右读取，例如字符串“123a456”,它读到a处就不在读取了，所以返回的值为123，如果字符串为“b123”，它读取第一个就不是数字，则直接返回NaN.

2)parseFloat()和parseInt()的作用类似，不同的是我们可以通过它来获取有效的小数；

!!!如果我们使用parseInt()或parseFloat()来转换非String类型的值（例如：ture,false,null,undefined）,它们会先将其转换为String，之后在进行操作。

//js里面数据类型的强制转化
    var a = "123";
    console.log(parseInt(a));
    var b = "1.23";
    console.log(parseFloat(b));
    console.log(parseInt(b));

    var c = "100px";
    console.log(parseInt(c));
    var m = "px100";
    console.log(parseInt(m));//NaN