本文共 2916 字，大约阅读时间需要 9 分钟。

排他操作

在 JavaScript 中，排他操作是一种常用的技术思想，用于确保在多个元素之间只有一个元素能够同时拥有某个特定的样式或属性。这种方法特别适用于按钮、图片和其他互斥元素的样式切换场景。

排他思想

排他思想的核心在于通过以下两个步骤实现：

这种方法非常适合像按钮这样的互斥控件，因为它能确保每次点击只有一项样式生效。

案例：百度换肤

在百度图片轮播中，每个图片都有独立的点击事件，点击一张图片后，页面背景会立即更换为该图片。以下是实现代码：

// 获取元素var imgs = document.querySelector('.baidu').querySelectorAll('img');// 循环注册事件for (var i = 0; i < imgs.length; i++) {    imgs[i].onclick = function() {        // 通过设置body的背景图片实现页面更换        document.body.style.backgroundImage = 'url(' + this.src + ')';    }}

自定义属性操作

自定义属性是一种轻松的方法，可用于存储和检索与元素相关的数据。自定义属性可以通过 getAttribute 和 setAttribute 方法来访问和修改。

获取属性值

使用 getAttribute 方法可以轻松获取元素的自定义属性值：

// 获取元素var div = document.querySelector('div');console.log(div.getAttribute('id')); // 输出'demo'console.log(div.getAttribute('index')); // 输出'1'

设置属性值

使用 setAttribute 方法可以设置或修改元素的自定义属性：

div.setAttribute('index', 2);div.setAttribute('class', 'footer');

移出属性

使用 removeAttribute 方法可以移除元素的自定义属性：

div.removeAttribute('index');

案例：tab栏

在tab栏中，每个tab按钮点击后，会激活相应的内容区域。以下是实现代码：

// 获取元素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() {        // 清除所有li的类        for (var i = 0; i < lis.length; i++) {            lis[i].className = '';        }        // 设置当前li的类        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';    }}

H5自定义属性

H5浏览器支持数据属性（data-*），可以用于存储和检索与元素相关的数据。以下是示例：

// 获取元素var div = document.querySelector('div');console.log(div.dataset.index); // 输出'2'console.log(div.dataset['listName']); // 输出'andy'

节点操作

在DOM中，节点是网页内容的基本单元，包括标签、属性、文本和注释等。JavaScript提供了丰富的API来操作节点。

父节点和子节点

通过 parentNode 和 children 属性可以轻松获取父节点和子节点：

var erweima = document.querySelector('.erweima');console.log(erweima.parentNode); // 输出'div'

兄弟节点

通过 nextSibling 和 previousSibling 方法可以获取兄弟节点：

var div = document.querySelector('div');console.log(div.nextSibling); // 输出'div'console.log(div.previousSibling); // 输出null

创建和添加节点

可以通过 createElement 和 appendChild 方法创建和添加新的节点：

// 创建li元素var li = document.createElement('li');// 将li添加到ul中var ul = document.querySelector('ul');ul.appendChild(li);

案例：简单版发布留言

以下是实现一个简单留言系统的代码：

// 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 绑定事件btn.onclick = function() {    if (text.value === '') {        alert('您没有输入内容');        return false;    } else {        var li = document.createElement('li');        li.innerHTML = text.value;        ul.insertBefore(li, ul.children[0]);    }}

通过以上方法，可以轻松实现页面元素的互斥操作和动态内容的加载。

转载地址：http://nxux.baihongyu.com/