WebApiⅡ：自定义属性、节点

自定义属性

获取属性值

element.属性：获取内置属性值

element.getAttribute(‘属性’) ：获取自定义属性值

<div id="demo" index="1" class="nav"></div>
<script>
    var div = document.querySelector('div');
    // 1. 获取元素的属性值
    // (1) element.属性
    console.log(div.id);  //demo
    //(2) element.getAttribute('属性') 
    console.log(div.getAttribute('id')); //demo
    console.log(div.getAttribute('index')); //1
</script>

设置属性值

element.属性 = ‘属性值’
element.setAttribute (‘属性’,‘属性值’) ：设置自定义属性值

// (1) element.属性= '值'
  div.id = 'test';
  div.className = 'navs';
// (2) element.setAttribute('属性', '值');  主要针对于自定义属性
  div.setAttribute('index', 2);
  div.setAttribute('class', 'footer');

移除属性

element.removeAttribute ('属性')

h5自定义属性

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
    // console.log(div.getTime);
    console.log(div.getAttribute('getTime'));
    div.setAttribute('data-time', 20);
    console.log(div.getAttribute('data-index'));
    console.log(div.getAttribute('data-list-name'));
    // h5新增的获取自定义属性的方法 它只能获取data-开头的
    // dataset 是一个集合里面存放了所有以data开头的自定义属性
    console.log(div.dataset);
    console.log(div.dataset.index);
    console.log(div.dataset['index']);
    // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
    console.log(div.dataset.listName);
    console.log(div.dataset['listName']);
</script>

节点

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3（文字、空格、换行）

实际开发中，节点操作主要操作元素节点

父级节点

node.parentNode

parentNode返回某节点的父节点（最近的），没有则返回null

<div class="demo">
       <div class="dad">
           <span class="son">×</span>
       </div>
   </div>
   <script>
   console.log(son.parentNode);
   </script>

子节点

parentNode.chlidNodes(标准)

返回值包含所有子节点，包括元素、文本节点等，so一般不用childNodes

parentNode.children(非标准)

返回值只有元素字节，so提倡用children

<ul>
    <li>胖虎同学</li>
    <li>panghutx</li>
    <li>www.wangyouwu.cn</li>
    <li>blog.wangyouwu.cn</li>
</ul>
<script>
    // DOM 提供的方法（API）获取
    var ul = document.querySelector('ul');
    var lis = ul.querySelectorAll('li');
    // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
    console.log(ul.childNodes);
    console.log(ul.childNodes[0].nodeType); //3
    console.log(ul.childNodes[1].nodeType); //1
    // 2. children 获取所有的子元素节点 也是我们实际开发常用的
    console.log(ul.children); 
	console.log(ul.children[0]); //第一个li
	console.log(ul.children[ul.children.length - 1]);//最后一个li
</script>

创建/添加节点

创建节点

document.creatElement('tagName')
添加节点

node.appendChild(child) 将节点添加到父节点的子节点列表末尾

node.inserBefore(child,指定元素) 将节点添加到父节点的子节点列表开头

<ul>
    <li>胖虎同学</li>
</ul>
<script>
    // 1. 创建节点元素节点
    var li = document.createElement('li');
    // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    // 3. 添加节点 node.insertBefore(child, 指定元素);
    var lili = document.createElement('li');
    ul.insertBefore(lili, ul.children[0]);
    // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>

删除节点

node.removeChild()

从node节点中删除子节点，返回的是删除节点

<button>删除</button>
 <ul>
     <li>胖虎</li>
     <li>胖虎同学</li>
     <li>胖虎同学的博客</li>
 </ul>
 <script>
     // 1.获取元素
     var ul = document.querySelector('ul');
     var btn = document.querySelector('button');
     // 2. 删除元素  node.removeChild(child)
     // ul.removeChild(ul.children[0]);
     // 3. 点击按钮依次删除里面的孩子
     btn.onclick = function() {
         if (ul.children.length == 0) {
             this.disabled = true;
         } else {
             ul.removeChild(ul.children[0]);
         }
     }
 </script>

克隆节点

node.cloneNode()

如果括号参数为空或false，则为浅拷贝，只克隆节点本身，不克隆里面的子节点
括号参数为true，则为深拷贝，会克隆字节本身以及里面所有子节点

<ul>
    <li>1111</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili);
</script>