js-DOM-页面元素的兼容性、常用事件、节点

页面元素的兼容性：

所谓的兼容性指的就是当前浏览器是否支持当前对象的属性或是方法，如果支持就是兼容，如果不支持就是不兼容。

举个例子：

/**

 * 设置页面标签之间的文本内容的兼容性写法

 * @param obj

 * @param value

 */

function setInnerText(obj,value){

    if(obj.innerText){

        obj.innerText = value;

    }else {

        obj.textContent = value;

    }

}

var txt ={   //将与文本相关的封装到一个对象当中，之前的函数就是现在的对象的方法

    getInnerText: function(obj){

        if(obj.innerText){  //IE8及之前的早期浏览器版本支持的

            return   obj.innerText;

        }else {

            return   obj.textContent; // 火狐早期版本支持的

        }

    },

    setInnerText:function(obj,value){

        if(obj.innerText){

            obj.innerText = value;

        }else {

            obj.textContent = value;

        }

    }

};

常用事件小结及页面元素属性的设置：

常用事件：onclick  鼠标单击

ondblclick 鼠标双击

onkeyup  按下并释放键盘上面的一个键时触发

onchange 文本内容或下拉菜单中的内容发生改变时触发

onfocus   获得焦点，表示文本等获得鼠标光标

onblur    失去焦点，表示文本框等失去鼠标光标

onmouseover 鼠标悬停，鼠标停留在图片上方等

onmouseout 鼠标移出，离开所在图片的区域

onload      网页文档加载时间

onunload      关闭网页时

onsubmit   表单提交时

元素属性的设置与改变：

文本框的禁用：

<input type="text" value="请输入一个值：" id="txt"/>

（事件省略） 当txt.disable=true;时文本框被禁用；当txt.disable=false;时文本框被解除禁用。

获得把文本框的焦点时：

文本框背景颜色的设置： txt.style.backgroundColor=颜色;

边框颜色的设置： txt.style.borderColor=颜色;

选择框（checkbox）：

var inputs=j_tb.getElementsByTagName("input");

checked

设置或返回 checkbox 是否应被选中

当  inputs[i]..checked=true；表示被选中；当inputs[i].checked=false;时表示未被选中。

自定义属性：

<input type="text" class="ip" id="txt" value="123" aa="258"/>

<script>

var txt = document.getElementById("txt");

txt.mm = "258";  // 这里可以通过 JS来设置自定义属性的

console.log(txt.type);

console.log(txt.id);

console.log(txt.value);

console.log(txt.aa);   // JS只能获取标签对象的原有属性，无法获得自定义属性

console.log(txt.mm);   //此处可以获得js设置的自定义属性

// 通过对象.的方式是无法获得标签 元素的自定义属性的

</script>

节点：

节点的规定：DOM 是这样规定的：

• 整个文档是一个文档节点
• 每个 XML 标签是一个元素节点
• 包含在 XML 元素中的文本是文本节点
• 每一个 XML 属性是一个属性节点
• 注释属于注释节点

<div class="box" id="box">

    <ul id="ul">

        <li>1111</li>

        <li>2222</li>

        <li id="li">3333</li>

        <li>4444</li>

    </ul>

</div>

<script>
var ul = document.getElementById("ul");

console.log(ul.parentNode); //直接获得ul的父级元素节点
var lis =  ul.childNodes;  // 获得所有的子节点，包括文本节点

 for(var i=0;i<lis.length;i++){

     console.log(lis[i]);

 }
console.log(lis.length);   //长度为9

var lis2 = ul.children;  // children只会获得ul内元素节点

console.log(lis2.length);  //长度为4

for(var i=0;i<lis2.length;i++){

    console.log(lis2[i]);

}

</script>

nodeTypes - 有名常数,nodeName与 nodeValue属性返回的值：

标签（ELEMENT_NODE）的节点类型是 1；

节点的名字是：对应的标签名字

标签的节点值：null

属性（ATTRIBUTE_NODE）的节点类型是：2；

它的名字是：属性名；

它的节点值是：属性值；

文本（TEXT_NODE）的节点类型是：3

它的名字是：#text

他的值是：文本的内容。（无内容就为空）

兄弟节点：

<div class="box" id="box">

    <ul id="ul">

        <li>1111</li>

        <li>2222</li>

        <li id="li">3333</li>

        <li>4444</li>

    </ul>

</div>

<script>
var li = document.getElementById("li");

console.log(li.nextSibling);  // 下一个紧邻节点，chrome 火狐都支持的，只不过呢，有可能 会获得文本节点，IE8及之前的浏览器会忽略空白文本节点，如果文本有内容，也会获得到

console.log(li.nextElementSibling);// 谷歌和火狐都可以获得下一个紧邻的元素节点，而IE8及之前的版本不支持

console.log(li.previousSibling);// 上一个紧邻节点，chrome 火狐都支持的，只不过呢，有可能 会获得文本节点，IE8及之前的浏览器会忽略空白文本节点，如果文本有内容，也会获得到

console.log(li.previousElementSibling);// 谷歌和火狐都可以获得下一个紧邻的元素节点，而IE8及之前的版本不支持
</script>