2020.10.31 Tab导航栏 自定义属性 节点操作 添加节点

Tab导航栏

自定义属性的命名

data - index
data - time

自定义属性的设置
1.在标签中设置

<p   data -index = '1'></p>

2.在scrip中设置

<script>
p.setAttribute('data-index' 1);
</script>

H5新增方法获取自定义属性的方法（只能获取data-开头的属性）
element.dataset 是所有data开头自定义属性
element.dataset.index 或者element.dataset[index] 获取的是data-index的属性值
element.dataset.listName 获取的是data-list-name的属性值

节点操作

为什么要用节点操作：节点操作在获取属性值时会更加具有逻辑性更简便

但是具有兼容性问题

节点三要素：节点类型（NodeType） 节点名称（NodeName） 节点值（nodeVode）
元素节点 nodeType = 1
属性节点 nodeType = 2
文本节点 （文字等） nodeType = 3

父节点操作

element.parentNode 得到离element最近的父级节点

子节点操作

1.element.childNode 得到离element最近的子级节点，所有节点包括属性节点，文本节点（不建议用）
注意 换行等也是节点需要筛选
2.element.children 得到只子级属性节点 （推荐）

3.获得第一个子元素节点：element.firstelementchild （兼容性问题） element.children[0];(无兼容问题)
4.获得最后一个子元素节点： element.lastelementChild（兼容性问题） element.children[ol.children-1]（无兼容问题）

兄弟节点 （存在兼容性问题）

element.nextElementSibling (滴节点)
element.previousElementSibling（兄节点）

添加节点

1.创建节点
2.添加到父节点后面
element.appendElement(‘要添加的标签’)

  <script>
        //创建元素
        var li = document.createElement('li');
        //只能用qurrySelector获取节点
        var div = document.querySelector('div');
        //添加子节点
        div.appendChild(li);
    </script>

1.创建节点
2添加到任意元素的前面
div.insertBefore(要添加的元素，添加到那个元素前面);

//将节点添加到任意位置
        var lili = document.createElement('li');
        div.insertBefore(lili, div.children[0]);

删除节点

removeChild()

阻止链接跳转：href=‘javascript:;’

复制节点

 //复制节点
        var p = div.children[2].cloneNode(); //浅拷贝：只复制标签不复制内容

        div.appendChild(p);
        //深拷贝：既复制标签，又复制内容
        var p2 = div.children[2].cloneNode(true);
        div.appendChild(p2);

//
/
/
/

创建标签，元素

1.父标签（元素）.innerHtml= 值 或者标签;

<script>
        var div = document.querySelector('div');
        div.innerHTML = '<a href ="#">百度</a>';
    </script>

2.var li = document.createElement(‘li’);