学习笔记---api02---焦点事件鼠标事件获取元素自定义属性

onmouseover 鼠标进入事件
onmouseout 鼠标移除事件

==================================================================

获取元素

document.getElementsById("node_small").getElementsByTagName("a") [0];
//获取id名为node_small下的第一个a标签

通过name属性值获取元素-----表单标签
getElementsByName
返回值为伪数组

根据类样式的名字来获取元素
getElementsByClassName-----------h5方法
返回值为伪数组 iE8以下不支持

获取元素的其他方式
1.点击按钮弹出对话框
根据选择器的方式获取元素–id选择器–标签–类

document.querySelector(id);

document.querySelectorAll(id);

！！！！！！！获取元素的方式总结！！！！！！！！！
1.根据id属性的值获取元素，返回来的是一个元素对象
document.getElementById(“id属性的值”)

2.根据标签名字获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document.getElementsByTagName(“标签的名字”)

===============================================================
以下的几个，有的浏览器不支持
3.根据name属性的值获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document.getElementsByName(“name属性的值”)

4.根据类样式的名字来获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document.getElementsByClassName(“类样式的名字”)

5.根据选择器获取元素，有多个的话，选择第一个，返回来的是一个元素对象
document.querySelector(“选择器的名字”)

6.根据选择器获取元素，返回来的是一个伪数组，里面保存了多个DOM对象
document.querySelectorAll(“选择器的名字”)

================================================================

焦点事件

获取焦点事件
onfocus()
失去焦点事件
onblur()

模仿文本框的placehoder
判断文本框是否为空时，用字符串的长度是否为判断，编程语言在处理数字的速度要快于字符串的速度

获取双标签的文本内容
document.getElementsByTagName(‘p’)[0].innerText)

设置标签中间的文本内容，应该使用textContent属性–IE8不支持
设置标签中间的文本内容，应该使用innerText属性–IE8支持 --低版本火狐不支持

兼容写法
若是浏览器不支持这个属性这放回undefined
通过获取这个属性的值，来判断用哪个方法

function setText(elment, text) {
            if (typeof (elment.textContent) == 'undefined') {
                console.log('123');
                elment.innerText = text;
            }
            else {
                elment.textContent = text;
            }
        }
        function getText(elment) {
            if (typeof (elment.textContent) == 'undefined') {
                return elment.innerText;
            }
            else {
                return elment.textContent;
            }
        }

浏览器
谷歌火狐 IE opera 苹果

innerText

innerText设置标签内容是没有标签效果的
innerHTML主要的作用是在标签中设置新的html标签内容，是有标签内容的
想要设置文本内容可以设置innerText innerHTML textContent
获取文字时：
innerText获取标签的内容时，如果该标签中还有其他的标签文字，那么里面的标签的文本内容也会被获取
innerHTML会将标签里的文字都获取出来，包括里面的标签名和文字，所以innerHTML才是真正的获取标签中的文字

=========================================================================
本身html标签中没有这个属性，我们自己可以添加，叫做自定义属性，主要是为了存储一些数据

但是自定义属性不能通过点语法输出
只能通过getAttribute()方法

<ul class="uu">
        <li sc="1111">1</li>
        <li sc="2222">2</li>
        <li sc="3333">3</li>
        <li sc="4444">4</li>
        <li sc="5555">5</li>
    </ul>
    <script>
        var liObjs=document.getElementsByTagName('li');
        for(var i=0;i<liObjs.length;i++) {
            liObjs[i].onclick=function() {
                alert(this.getAttribute('sc'));
            };
        }
    </script>

用js给Html添加和获取自定义属性

 <ul class="uu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var liObjs = document.getElementsByTagName('li');
        for (var i = 0; i < liObjs.length; i++) {
            // liObjs[i].score=(i+1)*10;
            // 这个方法可以添加，但是添加的属性在DOM对象上，不在标签中
            liObjs[i].setAttribute('score',(i+1)*10);
            liObjs[i].onclick=function() {
                alert (this.getAttribute('score'));
            };
        }

设置自定义属性：setAttribute(“属性的名字”,“属性的值”)
获取自定义属性：getAttribute(“属性的名字”)

========================================================
移除自定义属性removeAttribute(“属性名字”)----也可以移出元素自带的属性