排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法

先找到所有的元素
消灭所有的元素样式，改成初始样式
然后留下自己，设置特定样式

注意：顺序不能颠倒，先消灭后自己

        window.onload=function(){// 【1】选择所有的相关元素// .getElementsByTagName("li")var lis=document.querySelectorAll(".choose>li");// lis是一个伪数组(对象)，里面的每一个元素进行遍历for(var i=0;i<lis.length;i++){lis[i].onclick=function(){// 【2】先进行全部消灭，将所有的背景颜色先全部改为初始颜色for(var j=0;j<lis.length;j++){lis[j].style.backgroundColor="azure";}// 【3】然后留下自己，将当前点击的这个元素的背景颜色进行单独改变// this代指当前事件的所属元素自身，当前自身绝对不能用lis[i]代表this.style.backgroundColor="pink";} }}

实现全选

    <script>window.onload=function(){// 【1】获取全选选择框var ckall=document.getElementById("ckall");// 【2】获取所有的选择框var cklist=document.querySelectorAll(".mytb td>input");console.log(cklist);ckall.onclick=function(){// 【3】根据全选的这个选择框进行设置另外的选择框for(var i=0;i<cklist.length;i++){cklist[i].checked=this.checked;}}// 【4】使用其他选择框的状态控制全选选择框for(var i=0;i<cklist.length;i++){cklist[i].onclick=function(){// 1.创建一个变量来记录是否有哪个选择框未被选择var flag=true;// 2.判断所有的选择框的状态，如果有一个是未选状态则改为falsefor(var j=0;j<cklist.length;j++){if(!cklist[j].checked){flag=false;break;}}// 3.将全选的选择框设为flag状态ckall.checked=flag;}}}</script>

自定义属性

可以在使用DOM操作元素的时候，可以给元素添加一些其原本没有的属性，来记录一些数据

获取属性值

元素对象.属性名获取属性值
元素对象.getAttribute(属性名) 获取属性值

区别：通过对象名点属性名获取到的是元素的属性值，并且对css属性以css形式返回。不能获取到自定义属性的值

通过getAttribute获取属性值，返回的结果是以字符串体现，可以获取到自定义属性的值

设置属性值

元素对象.属性名=属性值。
元素对象.setAttribute(属性名,属性值);//属性名完全按照元素原本的属性名设置，否则将是自定义属性

区别：通过元素对象.属性名=属性值只能设置元素对象原有的一些属性，无法设置自定义属性

通过元素对象.setAttribute(属性名,属性值)可以设置任何属性

作用

使用自定属性来让标签自己记录一些不保密的数据，但是又要跟随元素的变化而变化的数据

移除属性

元素对象.removeAttribute(属性名)

H5自定义属性

自定义属性目的：是为了保存一些数据，有些数据可以保存到页面里而这些数据不需要保存到服务器数据库中。

自定义属性获取和创建基本上都是通过和Attribute有关的两个函数实现

自定义属性有可能会产生很多的歧义，并且不是很好区分到底是标签原有属性还是自定义属性

H5新增了自定义属性：

规则

H5里面规定自定义属性必须以data-开头作为属性名称并且赋值
获取H5自定义属性和设置自定义属性依然使用Attribute函数
在H5里面新增了元素名称.dataset.属性名称或者元素名称.dataset[属性名称]，在IE11里面才能被支持，这里使用的属性名称不包含data-，dataset属性会将这个元素的所有自定义属性全部以键值对的方式保存起来

节点操作

节点概述

网页页面中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中节点以Node来表示

在使用DOM操作对节点实现修改、添加、删除操作

一般情况下，节点至少拥有三个基本属性

nodeType：节点类型，这里的类型是标签的名称
nodeName：节点名称，这里的名称是js中给这个节点起的一个名字
nodeValue：节点值

创建节点

document.createElement(“div”)

document.createElement(tagName)方法创建由tagName指定的HTML元素，因为这些元素原先不存在document里面，而是根据我们的需求动态创建的，所以这种创建方式的元素叫做动态节点

同时创建的节点需要添加到HTML文档中

添加节点

node.appedChild(节点)，方法将一个节点元素添加到指定的父节点中的最后一个子节点之后
node.insertBefore(节点,子节点)，方法将一个节点元素添加到指定的父节点中的指定子节点之前

节点层级

利用DOM将节点划分为不同的层级关系，常见的层间关系就是父子关系

一般操作包含以下：

父级节点：node.parentNode
子级节点：
1. node.childNodes(标准)，返回包含指定子节点的集合，这个集合会进行即时更新
  
  注意：
  
  返回值里面包含了所有的子节点包括孙子级别，还包含有文本节点，如果只想要获取里面的元素节点，需要专门处理。因此一般不用这个方式
2. parentNode.children(非标准)，是一个只读属性，返回所有的子元素节点，它只返回子元素节点，不会返回浏览器的格式化节点
  
  之后主要使用这个属性
第一个子节点：parentNode.firstChild

返回第一个子节点，找不到则返回null，同样包含文本节点
最后一个子节点：parentNode.lastChild

返回最后一个子节点，找不到则返回null，同样包含文本节点
第一个子元素节点：parentNode.firstElementChild

返回第一个子元素节点，找不到则返回null，只找元素，IE9之后
最后一个子元素节点：parentNode.lastElementChild

返回最后一个子元素节点，找不到则返回null，只找元素，IE9之后
兄弟节点：

上一个元素兄弟节点：self.previousElementSibling

下一个元素兄弟节点：self.nextElementSibling

上面两个只管元素问题，有兼容问题

上一个兄弟节点：self.previousSibling

下一个兄弟节点：self.nextSibling

上面两个找所有的节点包含文本节点

JavaScript--【JS】排他思想相关推荐

JavaScript之排他思想详述
在前面的博客中,小熊更新了相关操作元素的方法,但是如果有同一组元素,我们想要某一个元素实现某种样式,这时需要怎么办呢? 这里就要用到循环的排他思想. 排他思想的算法就是: 排除掉其他的(包括自己),然 ...
android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
JavaScript 排他思想
排他思想排他思想案例分析排他思想如果有同一组数元素我们想要某一个元素实现某种样式这时候需要用到循环的排他思想算法 1 所有元素全部清楚样式 2 给当前的元素设置样式 3 注意顺序先清楚 ...
排他思想（Js代码实现，有经典案例）
排他思想(js实现) 如果有同一组元素,外卖想要某一个元素实现某种样式,需要用到循环的排他思想算法: 所有元素全部清空样式(干掉其他人) 给当前元素设置样式(留下自己) 注意顺序不能颠倒,首先干掉其他 ...
JavaScript排他思想
什么是排他思想? 排他思想是为一组同类型元素中的某一个元素设置样式时,采用的一种特定顺序.首先将所有元素的样式设置为一般样式(包括特定的某个元素),再为特定元素设置特定样式. 排他思想的优势排他思想 ...
JavaScript【事件委托实现排他思想】
事件委托实现排他思想: <style>ul {background-color: #ccc;}.active {color: red;}</style> </head&g ...
jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
Jquery排他思想实现
我们先来温习一下js里面的排他思想的写法,给五个按钮,点击某一个按钮这个按钮就变成粉红色,其余按钮都是白色,若采用js实现这个案例需要采用循环判断来写,代码如下: <!-- jquery排他思想 ...
排他思想与自定义属性
1.排他操作排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意顺序不能颠倒,首先 ...

JavaScript--【JS】排他思想