排他思想&节点

案例

排他思想

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

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

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

        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.判断所有的选择框的状态，如果有一个是未选状态则改为false
                    for(var j=0;j<cklist.length;j++){
                        if(!cklist[j].checked){
                            flag=false;
                            break;
                        }
                    }
                    // 3.将全选的选择框设为flag状态
                    ckall.checked=flag;
                }
            }
        }
    </script>

自定义属性

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

获取属性值

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

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

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

设置属性值

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

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

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

作用

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

移除属性

元素对象.removeAttribute(属性名)

H5自定义属性

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

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

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

H5新增了自定义属性：

规则

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

节点操作

节点概述

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

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

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

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

创建节点

document.createElement(“div”)

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

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

添加节点

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

删除节点

1. removeChild

修改节点

主要修改dom的元素属性，dom元素的内容，属性，表单的值等

1. 修改元素属性：src，href，title
2. 修改普通元素内容：innerHTML，innerText
3. 修改表单元素：value，type，disabled
4. 修改元素样式：style，className

查找节点

主要获取查询dom元素

1.DOM提供的API方法：getElementByld，getElementByTagName

节点层级

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

一般操作包含以下：

1. 父级节点：node.parentNode

2. 子级节点：

   1. node.childNodes(标准)，返回包含指定子节点的集合，这个集合会进行即时更新

      注意：

      返回值里面包含了所有的子节点包括孙子级别，还包含有文本节点，如果只想要获取里面的元素节点，需要专门处理。因此一般不用这个方式

   2. parentNode.children(非标准)，是一个只读属性，返回所有的子元素节点，它只返回子元素节点，不会返回浏览器的格式化节点

      之后主要使用这个属性

3. 第一个子节点：parentNode.firstChild

   返回第一个子节点，找不到则返回null，同样包含文本节点

4. 最后一个子节点：parentNode.lastChild

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

5. 第一个子元素节点：parentNode.firstElementChild

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

6. 最后一个子元素节点：parentNode.lastElementChild

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

7. 兄弟节点：

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

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

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

   上一个兄弟节点：self.previousSibling

   下一个兄弟节点：self.nextSibling

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