DOM的相关操作

1. 自定义类数组,并说出与纯数组的区别与联系,哪些地方会用到类数组 2. 获取dom元素的API有几个,他们的使用场景是什么? 3. 如何优雅的获取form表单元素与控件的值? 4. dom元素的遍历与常用API有哪些, 实例演示

1.自定义类数组

<script>
        let arr = ['a','b'];
        console.log(arr);
        // 类数组
        let arrx = {
            0:'a',
            1:'b',
            length:2
        }
        console.log(arrx);
        console.log(arr[0],arrx[1]);
        //大小写Object
        if(arr instanceof Object)
        {
            console.log('123');
        }

与纯数组的区别:方法不同
联系：类型都是Object，都可以索引遍历

2.dom元素的API

<script>
        // let first = document.querySelector('.item');
        // //获取一个元素
        // console.log(first);
        // let second = document.querySelectorAll('.list');
        // //获取一组元素
        // console.log(second);
        // in:遍历键
        // of:遍历值
        // of和in的区别
        //  let arr = {
        //     'a':'ajd',
        //     'b':'asdk'
        //  };
        // for(let x in arr){
        //     console.log(x);
        // }
        // console.log(arr);
        // let items = document.querySelectorAll('.list .item');
        // console.log(items);
        // for(let k of items.keys()){
        //     console.log(k);
        // }
        // for(let v of items.values()){
        //     console.log(v);
        // }
        // for(let kv of items.entries()){
        //     console.log(kv);
        // }
        let first = document.querySelectorAll('.list .item');
        // let second = first.querySelector('');
        console.log(first);
        first.forEach(function (v){console.log(v);})
        let second = document.querySelector('.list .item:nth-of-type(3)');
        console.log(second);//querySelector:获取的都是单个元素对象
        second.style.color = 'red';
        let three = document.querySelectorAll('.list .item:nth-of-type(2)')
        console.log(three);//querySelectorAll:获取的都是数组对象,一般和forEach搭配使用
        console.log(three[0]);
        //querySelector和querySelectorAll不只有document
        let m = document.querySelector('.list');
        let n = m.querySelectorAll('.item');
        n.forEach(function(v){v.style.color = 'red'});
        console.log(document.body);
        console.log(document.head);
        console.log(document.title);
    </script>

querySelector和querySelectorALL的区别：
querySelector：选中一个元素，类型是element，可以直接使用，.childrend是其对象的子元素，（是类数组）
querySelectorALL:x=选中的是一个数组，一般是和foreach一起使用，

3.获取form表单元素与控件的值

<script>
        //方法1：直接选择某个元素
        let value = document.querySelector('#login #email');
        console.log(value.type);
        //方法2：form获取id，input获取name，获取元素之后就可以获取其属性
        console.log(document.forms.login.password.value);
        //JSON:js对象的序列化,字符串
        let email = document.forms.login.email;
        let pasword = document.forms.login.password;
        let Json = {email:email,pasword:pasword};
        console.log(Json);
      </script>

4.dom元素的遍历与常用API

 // 1.对象：
        // Windows对象（全局对象）
        // document对象（文档对象,就是当前的Html文件）
        // element对象（元素对象, <ul><li><table><form>....）
        // text对象（文本对象, item1,item2,....）
       //document有个属性(也可以说任何元素对象都有)nodeType返回的是数字. 1.代表元素节点 2.代表属性节点 3.代表文本节点. 
    //    let x = document.querySelectorAll('.list .item');
    //     x.forEach(function(c){
    //         if(c.nodeType == 2)
    //             console.log(c);})
    // 1. 拿节点
    let list = document.querySelector('.list');
    console.log([...list.children]);
    // 2.拿子节点
    let listx = [...list.children];
    listx.forEach(function(kv){
        kv.style.color = 'red';
    })
    //想获取哪个元素，直接用索引
     listx[1].style.color='pink';
     let listm = document.querySelectorAll('.list');
     console.log([...listm[0].children]);
    </script>