js dom

dom选择器

<div class="box">001</div>
    <div class="box">002</div>
    <div class="box" id="three">003</div>

    <input type="text" name='1'>
    <input type="text" name='2'>
    <input type="snbmit" name='3'>

 // js选择器作用：选中html 元素
        // document 表示文档对象，内容整个页面的html，内部有很多API
        // 通过标签名字获取元素【集合】 参数为元素集合
        // 元素集合：是多个html元素组成的数组。每个html元素都是对象
        // var divs = document.getElementsByTagName('div');
        // console.log();
        // // 通过CLASS名字获取元素集合
        // var boxs = document.getElementsByClassName('box');
        // console.log(boxs);
        // getElements...获取的一定是一个集合
        // // 通过name属性查找html元素集合。参数为name属性的值
        // var ipt = document.getElementsByName('1');
        // querySelectorAll() 返回元素节点集合。参数：元素名字，或者.class css 中大部分选择器
        var divs = document.querySelectorAll('.box');
        console.log(divs);
        var ipt = document.querySelectorAll('[type=text]');
        console.log(ipt)
        // querySelector() 返回元素节点对象
        var div = document.querySelector('#three');
        console.log(div);
        // 获取元素文本节点
        var text = div.innerHTML;// 返回内容字符串
        console.log(text)
        // innerHTML 与 innText 区别
        // innerHTML 返回当前元素内部所有的内容。文本内容 元素字符
        // innerText 返回当前元素的文本内容
        // 当innerHTML 与 innerText 其中一个值发生改变的时候，两个值都发生改变
        // innerText 低版本IE 不兼容
        // 获取元素属性值
        var divID = div.id;// 获取id 属性值
        console.log(divID);
        var divClass = div.className;
        console.log(divClass);
        var divArr = div.classList;
        console.log( divArr);
        // 更改属性值
        div.className = 'cgabfeClassName';
        console.log(div.className);
        div.classList = 'a';
        console.log(div.classList);
        // className 返回class属性值得字符串，classList返回字符串属性的值得数组     
        <input type="text" name="userName" id="ipt" class="user">
        <!-- <img src="./picture/3.jpg"> -->
        <img id="img" alt="">   

dom属性

1: 获取html元素，变量作用：接受document.xx 的返回结果
2：保证html元素：一定是一个元素对象，而不是元素集合，只有元素对象才能访问dom下的属性
3：通过改变元素对象属性的值;以及使用元素对象中API.完成页面交互内容
注意：变量只有存数据，改变变量的值，不能改变存的数据，只能改变变量赋值
     改变数据本身，或者改变对象，只能通过对象本身去修改，对象.xxx  对象内置API修改   
     1：所有的对象属性一旦创建，绝对不能删除         

        var ipt = document.querySelector('#ipt');
        // console.dir(ipt);
        // console.log(querySelector('#ipt').attributes)
        // // 元素对象.attributes 返回当前元素的属性集合，不能修改
        // console.log(ipt.attributes);
        // var text = document.querySelector('#div').innerHTML;
        // // 给元素添加属性，元素对象.attrbute = 属性的值
        // // attrbute 表示是新增的属性，属性是html 元素中的属性，非自定义属性
        // ipt.className = 'aaa';

        // var attrs = ipt.attributes;
        // console.log(attrs);
        // // 新增属性
        // 语法： 对象.新属性 = 值;
        // 值只能是字符串类型
        // text.style.width = '100px';
        // text.style.height = '100px';
        // text.style.background = 'red';


        // 改变html属性的值
        // 语法：元素对象.属性 = 值
        // 1：获取html属性
        // 2：重新赋值
        ipt.type = 'submit';

        var img = document.getElementById('img');
        img.src = './picture/3.jpg';

设置css样式

<div class="box"></div>

// 获取div元素对象,获取document 下所有的div
    var div = document.getElementsByTagName('div');
    div = div[0];
    // 通过style属性 修改元素的行内样式
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.border = '1px solid black';
    div.style.background = 'red';

    // 通过添加className 更改css样式
    // div.className = 'box bg';

    // 通过classList 设置css 样式
    var classNameList = [...div.classList]
    // div.classList = 'box bg'; 
    div.classList.add('bg');