inner text与inner html

共同点：都是用来操作标签内容。

inne rtext

把内容当文本来处理。

获取时：会把html标签舍弃掉只获取文本内容。

设置时：也不能识别标签，会把标签转换为实体字符。

inner text的兼容性

火狐老版本不支持inner text属性，支持text content。

IE6，7，8不支持text content。

inner html

获取时:能够同时获取到文本和标签。

设置时：也能识别设置标签。

兼容性解决法

获取时：先检测一下用inner能不能获取到，如果可以直接获取，如果不行用text content属性。

按照以上思路封装一个函数，需要时直接用就可以了。

function getInnerText(element){
    //能力检测
    if(typeof element.innerText==="string"){
        return element.innerText;
    }else{
        return element.textContent;
        }
    }

function setInnerText(element,value){
    //能力检测
    if（typeof element.innerText==="string"）{
        element.innerText=value;
    }else{
        element.textContent=value;
        }
    }

表单属性

disable属性

标签中的disabled属性

在标签中，只要指定了disabled属性，无论有值没值，都代表这个input是被禁用的。

DOM中的disable属性

是一个布尔类型的属性，值为false（禁用）和true（不禁用）

type属性

标签中的type属性

在标签中，type属性指定了input框的类型，常用的有：text、checkbox、button

<input type="text"/><br/><!--文本框-->
<input type="button" value="禁用按钮" id="btn"/><!--按钮-->

DOM对象中的type属性

在DOM对象中，也同样有type属性，这个type属性的取值和标签是一样的，是一个字符串

var btn = document.getElementById(“btn”);
console.log(btn.type);//button

value属性

标签中的value属性

在标签中，value属性指定了input框的值

<input type="text" value=”123”/><br/>
<input type="button" value="禁用按钮" id="btn"/>

DOM对象中的value属性

在DOM对象中，也同样有value属性，我们可以通过DOM对象中的value属性来指定input框的值

var btn = document.getElementById(“btn”);
console.log(btn.value);//打印出按钮的值
btn.value = “aaa”；//修改按钮的值。

selected属性

标签中的selected属性

在option标签中，只要指定了selected属性，说明这个option被选中。

<select name="" id="">
    <option value="xs" id=”xs”>西施</option>
    <option value="dc" selected>貂蝉</option><！--貂蝉被选中-->
    <option value="ygf">杨贵妃</option>
</select>

DOM对象中的selected属性

在DOM对象中，selected的属性是一个布尔类型的属性，值只有true或者false

var xs = document.getElementById(“xs”);
    xs.selected = true;//该option被选中
    xs.selected = false;//该option没被选中

checked属性

标签中的checked属性

在标签中，只要指定了checked属性，说明这个checkbox被选中。

<input type="checkbox" id="j_cbAll" checked/>

DOM对象中的checked属性

在DOM对象中，checked的属性是一个布尔类型的属性，值只有true或者false

var all = document.getElementById(“j_cbAll”);
    all.checked = true;//该checkebox被选中
    all.checked = false;//该checkbox没被选中

事件属性

on focus:获得焦点
on blur：失去焦点

表单元素总结

布尔类型的属性总共有三个：checked、selected、disabled，这三个属性在DOM对象中值只有true或者false。

其他表单元素的值和标签中的值基本都是一样的，值基本都是字符串类型的，比如type、value、id等属性。

标签的自定义属性

<div id="box" aa="bb">盒子</div>

<script>
    var box = document.getElementById("box");
    console.log(box.id);//box
    console.log(box.aa);//undefined
</script>

标签里固有属性，在对象里都能找到

如果是标签自定义的一些属性，在对象里是获取不到的（undefined）

Attribute方法

获取标签的自定义属性

getAttribute（"属性name"）

作用是用来获取DOM对象对应的HTML标签的属性（包括自定义属性和固有属性）。

<div id="box" class="cls" aa="bb"></div>

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

    console.log(box.getAttribute("id"));//box
    console.log(box.getAttribute("aa"));//bb
    console.log(box.getAttribute("class"));//cls
</script>

设置自定义属性

setAttribute（"属性name"，值）

可以给标签设置属性（包括固有属性和自定义属性），并且能在html标签中显示出来。

<div id="box"></div>
<script>
    var box=document.getElementById("box");
    box.setAttribute("aa","bb");//给html标签设置了一个aa="bb"的自定义属性
</script>

移除一个属性（包括固有和自定义）

removeAttribute（"属性name"）

<div id="box" class="box1"></div>
<script>
    var box = document.getElementById(“box”);
    box.removeAttribute(“class”);//把class属性给移除掉了。
</script>

排他思想

==排他思想的核心：先干掉所有人，再复活自己==

来源：https://www.cnblogs.com/fate-notes/p/5970122.html

标签

自定义属性

dom

dom对象

element

DOM02-表单属性