通过DOM获取元素

通过id名、class名、标签名、name获取元素

通过id名 document.getElementById(‘id名’)
通过class名 document.getElementsByClassName(‘class名’);
通过这种方式获取的是一个伪数组
通过标签名 document.getElementsByTagName(‘标签名’);
通过这种方式获取的是一个伪数组
通过name（多用于表单，但是不常用） document.getElementsByName(‘name’)

<body>
    <p id="text">通过id</p>
    <span>通过标签名1</span><br>
    <span>通过标签名2</span><br>
    <i class="tip">通过类名</i><br>
    <i class="tip">通过类名2</i><br>
    <input type="button" value="通过name" name="byName"><br>
    <em name="byName">通过name2</em>
</body>
<script>
    // 通过id
    var oText = document.getElementById('text');
    console.log(oText);
    // 通过标签名
    var oSpan = document.getElementsByTagName('span');
    console.log(oSpan);
    console.log(oSpan[0]);
    console.log(oSpan[1]);
    // 通过类名
    var oTip = document.getElementsByClassName('tip');
    console.log(oTip);
    console.log(oTip[0]);
    console.log(oTip[1]);
    // 通过name
    var byName = document.getElementsByName('byName');
    console.log(byName);
    console.log(byName[0]);
    console.log(byName[1]); 
</script>

通过选择器

document.querySelector() 只可以获取一个元素
document.querySelectorAll( ) 可以获取多个元素
获取一个伪数组

<body>
    <div class="div1">通过选择器获取1</div>
    <div id="div2">通过选择器获取2</div>
    <span>通过选择器获取3</span>
    <span>通过选择器获取4</span>
</body>
<script>
    // class名
    var oDiv1 = document.querySelector('.div1');
    console.log(oDiv1);
    // id名
    var oDiv2 = document.querySelector('#div2');
    console.log(oDiv2);
    // 标签名
    var oTag = document.querySelector('span');
    console.log(oTag);  // 只获取第一个

    // 获取多个
    var oTag2 = document.querySelectorAll('span');
    console.log(oTag2);
    console.log(oTag2[0]);
    console.log(oTag2[1]);
</script>

两种方式获取元素的区别

通过选择器获取的多个元素返回的是一个节点的集合，而另外一种方式获取的多个元素是一个html元素的集合

节点 node

节点分为元素节点、属性节点、文本节点。

元素节点就是html元素，简单来说就是一个html标签。
属性节点是标签的属性，如clss、id、alt…
文本节点就是指一些文本内容

nodeType

返回节点类型
用法：对象.nodeType

结果：

元素节点返回1
属性节点返回2
文本节点返回3
注释节点返回8

<body>
    <h3 id="title">节点</h3>
    <h2><!-- 注释节点 -->
        
        </h2>
</body>
    <script>
        var title = document.getElementsByTagName('h3')[0];
        console.log(title.nodeType);  // 1
        console.log(title.getAttributeNode('id').nodeType);  // 2
        console.log(title.firstChild.nodeType);  // 3

		var zhushi = document.getElementsByTagName('h2')[0];
        console.log(zhushi.firstChild.nodeType);   // 8
	 </script>

nodeName

返回节点的名称
结果：

元素节点：返回大写的标签名
属性节点：返回属性名
文本节点：返回#text
注释节点：返回#comment

<body>
    <h3 id="title">节点</h3>
    <h2><!-- 注释节点 -->
        
        </h2>
</body>
    <script>
        var title = document.getElementsByTagName('h3')[0];

        console.log(title.nodeName);  // H3
        console.log(title.getAttributeNode('id').nodeName);  // id
        console.log(title.firstChild.nodeName);  // #text

        var zhushi = document.getElementsByTagName('h2')[0];
        console.log(zhushi.firstChild.nodeName);  // #comment

    </script>

nodeValue

返回节点值（节点的内容）
结果：

元素节点：null
属性节点：返回属性值
文本节点：返回文本内容
注释节点：返回注释内容

<body>
    <h3 id="title">节点</h3>
    <h2><!-- 注释节点 -->
        
        </h2>
</body>
    <script>
        var title = document.getElementsByTagName('h3')[0];

        console.log(title.nodeValue);  // null
        console.log(title.getAttributeNode('id').nodeValue);  // title
        console.log(title.firstChild.nodeValue);  // 节点

        var zhushi = document.getElementsByTagName('h2')[0];
        console.log(zhushi.firstChild.nodeValue);  // 注释节点 
    </script>

元素属性

getAttribute(‘属性名’)
获取元素的属性（行内），返回属性值
setAttribute(‘属性名’,‘属性值’)
可以新创建一个属性，也可以直接修改原有的属性
removeAttribute(‘属性名’)
移除属性
creatAttribute(‘属性名’)
创建属性

<body>
    <div class="box" id="box">
        <input type="button" value="切换" id="change">
        <input type="button" value="新增" id="add">
        <input type="button" value="删除" id="del">
        <img src="../../../练习/掌趣/img/292 (1).jpg" id="img">
    </div>
</body>
<script>
    // 获取元素
    var box = document.getElementById('box');
    var change = document.getElementById('change');
    var add = document.getElementById('add');
    var del = document.getElementById('del');
    var img = document.getElementById('img');

    console.log(box.getAttribute('class'));

    del.onclick = function () {
        box.removeAttribute('class');
    }
    var flag = 1;
    change.onclick = function () {
        if(flag){
            img.setAttribute('src', '../../../练习/掌趣/img/295.jpg');
            flag = 0;
        }else{
            img.setAttribute('src', '../../../练习/掌趣/img/292 (1).jpg');
            flag = 1;
        }
    }

    // 创建属性
    var newAttr = document.createAttribute('index');
    newAttr.value = '新属性';
    add.onclick = function () {
        img.setAttribute('alt', '这是图片');
        img.setAttributeNode(newAttr);
    }
</script>