初识DOM

    <div id = 'box'>哈哈哈</div>
    <ul id= "ullist">
        <li>我是第1名</li>
        <li class="lilist">我是第2名</li>
        <li class="lilist">我是第3名</li>
        <li>我是第4名</li>
        <li>我是第5名</li>
    </ul>
    <form action="" method = 'get'>
        <input type="radio" name = 'sex' value="men">男
        <input type="radio" name = 'sex' value="women">女
        <input type="checkbox" name = "hobby" value = "eat">吃
        <input type="checkbox" name = "hobby" value = "drink">喝
        <input type="checkbox" name = "hobby" value = "play">玩
        <input type="checkbox" name = "hobby" value = "fun">乐
    </form>

1)通过ID获取

document.getElementById('idName')

返回第一个符合条件的【元素节点】

注意要区分大小写

 //`document.getElementById()`方法返回匹配指定`id`属性的元素节点。如果没有发现匹配的节点，则返回`null`
 var idxzq = document.getElementById('box');
 console.log(idxzq);
 var ulxzq = document.getElementById('ullist');
 console.log(ulxzq);

效果如下图：

2)通过class获取

document.getElementsByClassName('className')

返回HTMLCollection--类数组对象

通过下标获取对应的元素节点注意区分大小写，ie低版本不支持

//`document.getElementsByClassName()`方法返回一个【类似数组的对象】（`HTMLCollection`实例），
//包括了所有`class`名字符合指定条件的元素，元素的变化实时反映在返回结果中。
let liclass=document.getElementsByClassName("lilist");
console.log(liclass);

得到的是类数组对象

3)通过标签名

document.getElementsByTagName('标签名')

返回HTMLCollection--类数组对象

通过下标获取对应的元素节点

但不区分大小写

//`document.getElementsByTagName()`方法搜索 HTML 标签名，返回符合条件的元素。
//它的返回值是一个【类似数组对象】
var litag=document.getElementsByTagName('li');
console.log(litag);
var divtag = document.getElementsByTagName('div');
console.log(divtag);

返回类数组对象可以通过下标获取对应的元素节点。

4)通过name属性-通常用于表单

document.getElementsByName('name名')

返回NodeList 类数组对象

通过下标获取对应的元素节点

注意要区分大小写

//`document.getElementsByName()`方法用于选择拥有`name`属性的 HTML 元素
//（比如`<form>`、`<radio>`、`<img>`、`<frame>`、`<embed>`等），
//返回一个**类似数组的的对象**（`NodeList`实例），因为`name`属性相同的元素可能不止一个。
  let honame= document.getElementsByName('hobby')
  console.log(honame);
  let sexname = document.getElementsByName('sex')
  console.log(sexname);

5)通过css选择器

① document.querySelector('css选择器'):返回第一个符合条件的元素节点

//`document.querySelector`方法接受一个 **CSS 选择器**作为参数，
//**返回匹配该选择器的元素节点**。
//如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回`null`。
   let li1 = document.querySelector('#ullist');
   console.log(li1);
   let li2 = document.querySelector('.lilist')
   console.log(li2);

② document.querySelectorAll('css选择器'): 返回所有符合条件的元素节点

 //`document.querySelectorAll`方法与`querySelector`用法类似，
 //区别是返回一个`NodeList`对象，包含所有匹配给定选择器的节点。
   let li3 = document.querySelectorAll('#box')
   console.log(li3);
   let li4 = document.querySelectorAll('input')
   console.log(li4);

3.5 创建节点对象

1）创建元素节点【掌握】

document.createElement('标签名')

2）创建文本节点

document.createTextNode('文本')

3）创建属性节点

①创造属性节点

document.createAttribute('属性名')

②给属性节点赋值

属性节点.value = '属性值'

③设置属性节点到元素节点上

元素节点.setAttributeNode(属性节点)

4）添加子节点

父节点.appendChild(子节点)

例子：

            <script>

                //1.创建元素节点
                let h2 = document.createElement('h2');
                //2.创建文本节点|属性节点
                let text = document.createTextNode('哈哈哈哈');
                //3.添加文本节点到元素节点中
                h2.appendChild(text);
                //4.创建属性节点
                let tit  = document.createAttribute('title');
                //5.给属性节点赋值
                tit.value="文本哈哈哈哈"
                //6.给元素节点设置属性节点
                h2.setAttributeNode(tit);
                //7.把元素节点添加到页面
                document.querySelector("body").appendChild(h2);

       
        /*给页面中添加一个新的图片节点*/                

                //1.创建元素节点

                let img = document.createElement('img')

                //2.创建属性节点

                let src = document.createAttribute('src')

                //3.给属性节点赋值

                src.value="https://img0.baidu.com/it/u=3256003764,1272518583&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500";

                //4.给图片添加src属性

                img.setAttributeNode(src);

                //5.创建width属性

                let width = document.createAttribute('width')

                //6.给width属性赋值

                width.value = '200';

                //7.给图片属性添加width属性

                img.setAttributeNode(width);

                //8.把图片添加到页面中

                document.querySelectorAll('body')[0].appendChild(img)

            </script>

效果如下：