5-7、DOM属性

HTML属性分为固有属性 Property和自定义属性 attribute。

固有属性
未定义但浏览器自动给予的称为固有属性

<input type="text" id="txt" aa="x">

    var input = document.getElementById('txt');
    console.log(input.type);	//固有属性
    console.log(input.id);		//固有属性
    console.log(input.aa);		//自定义属性
    console.log(input.title);		//固有属性没定义，所以是空的

.这种方法只能访问固有属性，不能访问自定义属性。

自定义属性

<div src="baidu.com" xxx="xxx" Yyy="yy" yyy="yyy" ></div>

    var input = document.querySelector('div');
    console.log(input.attributes);  //获取元素属性集合⭐

定义的大写被自动转成了小写，后来的把前面的覆盖了。

attributes ()

 1. getNameItem		//获得
 2. removeNamedItem		//移除
 3. setNamedItem	//创建
//只能操作自定义属性

下面两种写法是等价的。

input.attributes.getNameItem('xxx').nodeName;
input.attributes['xxx'].nodeName;

//例子1
<div src="baidu.com" xxx="xxxx" Yyy="yy" yyy="yyyy" >一个div</div>

    var div= document.querySelector('div');
    console.log(div.attributes.getNamedItem("xxx").nodeValue);  
    //获取到 xxxx

尝试通过这种方法，获取固有属性：

<div src="baidu.com" xxx="xxx" Yyy="yy" yyy="yyy" >一个div</div>

    var div= document.querySelector('div');
    console.log(div.nodeName);  //nodeName是一个固有属性
    console.log(div.attributes.getNameItem('nodeName').nodeName);
    console.log(div.attributes.getNameItem('id').nodeName);

⭐ 这种方法，只能获取在div上定义的方法，哪怕是id，没有在div上定义也一样不能获取。

//删除属性
<div src="baidu.com" xxx="xxx" Yyy="yy" yyy="yyy" >一个div</div>

    var div= document.querySelector('div');
	div.attributes.removeNamedItem('xxx');

//用这种方法创建属性
<div src="baidu.com" xxx="xxxx" >一个div</div>

    var div = document.querySelector('div');
    var divsx = document.createAttribute("data_title");	//新建一个属性
    divsx.value = 'aa';		//赋值
    div.attributes.setNamedItem(divsx);		//填充进去

---

操作固有属性。
操作固有属性可以使用 . 这种操作方式。

    var div = document.querySelector('div');
    div.innerHTML = "替换了的div";

---

通用方法能够操作固有属性和自定义属性：

1. getAttribute
2. setAttribute
3. removeAttribute

getAttribute ()
可以获得指定属性名的属性值。
一般在js编程中，很少使用getAttribute () ，都是用 . ，只有在获取自定义属性的值的时候用getAttribute ()。

<div src="baidu.com" xxx="xxxx" Yyy="yyy" >一个div</div>

    var div = document.querySelector('div');
    console.log(div.getAttribute('src'));
    //得到 baidu.com

前面有说到，定义属性名时可以用大写，浏览器自动实别称小写，但是在getAttribute () 中一样可以使用大写Yyy来获取到，而且yyy一样能获取到。

在获取固有属性时，有时getAttribute () 和 . 获取道德内容不太一样。
比如：onclick、style等

<div style="color: red; " src="baidu.com" xxx="xxxx" >一个div</div>

    var div = document.querySelector('div');
    console.log(div.getAttribute('style'));
    console.log(div.style);

setAttribute
setAttribute ( '属性名' , '属性值');
如果是一个没有定义的属性名，那么就会创建这个属性并赋值。

<div src="baidu.com" xxx="xxxx" >一个div</div>

    var div = document.querySelector('div');
    div.setAttribute("xxx","a");

在设置固有属性（style、onclick）的时候存在差异，普通浏览器以及ie8没问题，ie7及以下不支持。

removeAttribute ()
删除属性。

<div src="baidu.com" xxx="xxxx" >一个div</div>

    var div = document.querySelector('div');
    div.removeAttribute ("xxx");

接下来看几个常见的元素固有属性：

布尔属性
多选中，checkbox 属性为true时，当前选项为被选中状态。

<input type="checkbox" checked="checked" > 抽烟
  <input type="checkbox" > 喝酒
  <input type="checkbox" > 烫头
    
    var inputs = document.querySelectorAll("input");
    inputs[1].checked = 1;
    //checked是固有属性，所以无法使用removeAttribute 删除这个属性
    inputs[1].removeAttribute ("checked");
    //但是可以删除在html中直接定义的checked
    inputs[0].removeAttribute ("checked");

checked 的运用还有单选：

<input type="radio" name="danxuan" id="" checked=""> 男 
<input type="radio" name="danxuan" id=""> 女

selected 属性为true时，选择当前选项。

<select name="xiala" id="xiala">
    <option value="chouyan">抽烟</option>
    <option value="hejiu" selected="selected">喝酒</option> //默认选择
    <option value="tangtou">烫头</option>
  </select>

    var select = document.getElementById('xiala');
    var ops = select.options; //.options获取select下的option集合⭐
    ops[2].selected = true; //设置第三个为选中

readonly 属性为true时，输入框不可修改（可以通过js修改），而数据可以正常传输给后台。

<input type="text" name="guoji" id="guoji" value="中国" readonly="readonly">

    var input_gj = document.getElementById("guoji");
    input_gj.readOnly = false;

disabled 属性为true时，会使输入框失灵，背景框变成灰色，输入框只能读，不能修改，并且，传输给后端时后端无法收到。

国家1：<input type="text" id="guoji1" value="中国" readonly="readonly" >
国家2：<input type="text" id="guoji2" value="中国" disabled="disabled" >

multiple 属性可以把select下拉菜单变为多选，通多按住Ctrl或Shift点击选项。

<select name="xiala" id="xiala" multiple="multiple">
    <option value="chouyan">抽烟</option>
    <option value="hejiu" selected="selected">喝酒</option> //默认选择这一个
    <option value="tangtou">烫头</option>
</select>

hidden 属性相当于 CSS中的display:none; ，设置hidden属性之后就会隐藏。该元素时时H5新元素，所以较低的浏览器不支持。

<p hidden="hidden">我会隐藏</p>

字符串属性
⭐常见的字符串属性：

id
title
href
Src
lang
dir
accesskey
name
value
class

id 属性具有唯一性，有两个相同的id时，js会获取第一个
title 鼠标放上去回显示出来
href
lang 属性规定元素内容的语言，一般在html中，其他也可以加。
accesskey 定义访问它的快捷键，比如给一个a，需要组合按键，Alt + a

dir

  <p dir="ltr">我会靠左</p>
  <p dir="rtl">我会靠右</p>

⭐全局属性，所有html元素都拥有的属性。

accesskey
class
contenteditable
dir
hidden
id
lang
spellcheck
style
tabindex
title
translate

contenteditable 是否可编辑元素的内容，常与spellcheck一起使用，检查是否符合输入规则。
hidden 隐藏
tabindex 使用 “tab” 进行导航时元素的顺序
translate 规定是否应该翻译元素内容，目前所有主流浏览器都无法正确支持该属性。

data属性
使用 data-* 属性来嵌入自定义数据：

<p data-xxx-yyy='dataxy' id="p1" ></p>

    var p1 = document.getElementById('p1');
    console.log(p1.dataset.xxxYyy);   //获取到：dataxy

用dataset 获取其值，用. 连接，后两个 - 的，第二个首字母用大写的。

自定义class操作属性
获取class：

  <h2 class="aaa bbb aaa"></h2>

    var cc = {
      getClass: function(ele){
        return ele.className.replace(/\s+/," ").split("");
      }
    };
    window.onload = function(){
      var h2 = document.h2;
      console.log(cc.getClass(h2));
    }

classList ()
classList 是较新的浏览器新增的属性，包含了多个方法。

//示例
document.getElementById("myDIV").classList.add("mystyle");

length 返回类列表中类的数量，该属性是只读的

方法：
add(class1, class2, ...) 在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
contains(class) 返回布尔值，判断指定的类名是否存在。
item(index) 返回元素中索引值对应的类名。索引值从 0 开始。
remove(class1, class2, ...) 移除元素中一个或多个类名。移除不存在的类名，不会报错。
toggle(class, true | false) 在元素中切换类名。

第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：
移除一个 class: element.classList.toggle(“classToRemove”, false);
添加一个 class: element.classList.toggle(“classToAdd”, true);