dom操作操作元素属性的若干方法

// 1,通过HTMLElement类型的属性来获得和设置元素特性(设置的是元素属性，比如class，id，title,而不是css样式，比如float，border等）
let div = document.getElementById("div");
 let link = document.getElementById("link");
 // 获取
 const id = div.id;
 const classname = div.className;
 const title = div.title;
 const href = link.href;
 // 设置
 div.id = "boxes";
 div.className = "test";
 div.title = "我是标题";
 link.href = "http://www.sina.com.cn";

 // 2,通过getAttribute()、setAttribute() 方法，获取、设置、移除元素的特性
 // 获取
 div.getAttribute("id");
 div.getAttribute("class");
 link.getAttribute("href");
 // 设置
 div.setAttribute("id","myDiv");
 div.setAttribute("title","我也是标题哦");
 link.setAttribute("href","link.html");
 // 注：不建议使用该特性设置元素的类名(浏览器不兼容)，设置类名可以这样：document.getElementById("myDiv").className=("***");

 // 3,通过attributes属性，获取、设置、移除元素的特性
 // 获取
 id2 = div.attributes["id"].nodeValue;
 // 设置
 div.attributes["id"].nodeValue = "myDiv2";

 // 4,移除元素属性的方法
 div.removeAttribute("class");
 div.attributes.removeNamedItem("class");

 // 5,追加类名的方法(以上设置属性值的方法,均是将原值替换掉,因为类名可以同时存在多个值,故需要增加和删除)
 el.classList.add("classname");
 el.classList.remove("classname");
注:classList兼容IE>=10,以下版本的兼容实现方法如下(该方法为网络上照抄的写法):

if (!("classList" in document.documentElement)) {

  Object.defineProperty(HTMLElement.prototype, 'classList', {
    get: function() {
      const self = this;
      function update(fn) {
        return function(value) {
          let classes = self.className.split(/\s+/g);
          let index = classes.indexOf(value);
          fn(classes, index, value);
          self.className = classes.join(" ");
        }
      }

      return {
        add: update(function(classes, index, value) {
          if (!~index) classes.push(value);
        }),

        remove: update(function(classes, index) {
          if (~index) classes.splice(index, 1);
        }),

        toggle: update(function(classes, index, value) {
          if (~index)
            classes.splice(index, 1);
          else
            classes.push(value);
        }),

        contains: function(value) {
          return !!~self.className.split(/\s+/g).indexOf(value);
        },

        item: function(i) {
          return self.className.split(/\s+/g)[i] || null;
        }
      };
    }
  });
}