自定义属性与DOM操作-优快云博客

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/104495087

自定义属性的操作

获取自定义属性值
设置元素属性值
(1)element.setAtrribute(‘属性’，'值‘);
主要针对于自定义属性
div.setAtrribute(‘index’,2);
(2)element.属性=‘值’;
设置内置属性
div.id = ‘test’;
移除属性值
removerAttribute(属性);
div.removeAttribute(‘index’);
tab栏切换（重点案例）
（1）注意：要把所有内容先隐藏，用item类中设置 display:none; 然后第一个显示，直接先html中设置style=“display: block;”

商品介绍模块内容

（2）代码：

`* {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';

            }
        }
    </script>'

在这里插入图片描述
5. 自定义属性的目的：是为了保存并使用数据，有些数据很简单没有必要保存到数据库中去。
6. H5自定义属性
有些自定义属性很容易引起歧义，不容易判断是哪种类型
于是H5新增了自定义属性：
H5规定自定义属性以 data- 开头作为属性名并且赋值

data-index = '2'；

1. 兼容性获取  element.getAttribute('data-index');
2. H5新增element.dataset.属性（有严重的兼容性问题 ， IE11以上才支持），只能获取data-开头的，如果名字较长用驼峰命名法，如下
	![在这里插入图片描述](https://img-blog.csdnimg.cn/20200225132453453.png)
	获取上述方法，div.dataset.listName;
	![在这里插入图片描述](https://img-blog.csdnimg.cn/20200225132040456.png)

节点（获取元素更加简单）

网页中，所有内容都是节点。
节点至少拥有node Type(节点类型)，nodeName(节点名称),nodeValue(节点值) 这三个基本属性

节点操作主要操作的是元素节点
利用DOM数可以把节点划分为不同的层级关系，常见的是父子兄层级关系
父级节点 parentNode (得到的是离元素最近的父级节点)，如果找不到父节点就返回null
var box = document.querySelector(’.box’);
erweima.parentNode;
（1）子节点 childNodes 得到的所有的子节点，包含元素节点，文本节点（回车）等
var ul = document.querySelector(‘ul’);
ul.childNodes;
如果只想获得里面的元素节点，则需要专门处理。如下：
先遍历得到的伪数组，通过nodeType判断，nodeType是1则是元素节点（需要），是3则是文本节点（不需要）

（2） parentNode.children(非标准) 获取所有的子元素节点
是我们实际开发常用的
console.log(ul.children);
（3）firstChild第一个子节点，不管是文本节点还是元素节点.lastChild同理
parentNode.firstChild;
parentNode.lastChild;
（4）获取第一/最后一个子元素，找不到则返回null。但是有兼容性问题。
parentNode.firstElementChild;
parentNode.lastElementChild;
（5）因为（3），（4）获取子节点都有问题，以下是实际开发的写法，既没有兼容问题又返回第一个子元素
console.log(ul.children[0]);
因为子元素的个数不确定，所以取最后一个元素用ul.children[ul.children.length - 1]
下拉菜单
因为所有的小li都需要添加鼠标经过和移动事件，所以用for循环
导航栏显示与隐藏
兄弟节点
（1）node.nextSibling;返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有节点。
（2）node.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
（3）nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。有兼容性问题，IE9以上才支持
（4）previousElementSibling;返回当前元素上一个兄弟元素节点，找不到则返回null。有兼容性问题，IE9以上才支持
解决（3）（4）兼容性问题，自己封装一个函数
创建节点
document.createElement(‘tagName’); 方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需要动态生成的，所以我们也称为动态创建元素节点。
添加节点
node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素，类似于数组中的push。
var li = document.createElement(‘li’);
//添加节点
var ul = document.querySelector(‘ul’);
ul.appendChild(li);
添加节点（在前面）
node.insertBefore(child,指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于css里面的befor
删除节点
node.removerChild(child)
从DOM中删除一个子节点，返回删除的节点

点击按钮，删除一个元素。当ul中没有元素时，禁用按钮。 this.disabled = true;
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
```
}
```
样式尽量通过css修改，并且innerHTML 可以添加html标签元素。
当不需要链接跳转时，阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
复制节点
node.cloneNode()
返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
node.cloneNode()；括号为空或者里面是false 是浅拷贝，只复制标签不复制里面的内容。如果括号里面为true，为深拷贝，复制标签以及里面内容。
border-collapse: collapse; table表格相邻边框合并

其中，obj[k]，必须是中括号获取，不可用 . 代替，会undefined.
把值填入标签， innerHTML
动态创建表格案例

 <style>
        table {
            width: 400px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }
        
        th {
            background-color: skyblue;
            font-size: 18px;
            color: cornsilk;
            font-weight: 400;
        }
        
        td {
            /* background-color: pink; */
            font-size: 14px;
            height: 20px;
        }
        
        th,
        td {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing='0'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        //存储多个对象，用创建数组的方式，而每个对象相当于数组中的一个元素
        var dates = [{
            name: '张三',
            subject: 'JS',
            score: '100'
        }, {
            name: '李四',
            subject: 'JS',
            score: '40'
        }, {
            name: '王五',
            subject: 'JS',
            score: '70'
        }, {
            name: '孙刘',
            subject: 'JS',
            score: '90'
        }];
        // 往tbody里创建行，有几个人创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < dates.length; i++) {
            //创建元素 tr行,创建完之后还得添加进去。
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //行里面创建单元格 td单元格的数量取决于每个对象里面的属性个数
            //通过for循环遍历对象for (var k in obj)
            for (var k in dates[i]) { //里面的for 循环管列 td
                var td = document.createElement('td');
                //把属性值 给td
                td.innerHTML = dates[i][k];
                tr.appendChild(td);

            }
            // 3.创建有删除两个字的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        // 4.删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                //点击a删除当前a所在单元格的行，就是a的爸爸的爸爸
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>