DOM操作：元素、属性与文本节点的获取与设置-优快云博客

div就是元素节点（任意的标签都是元素节点）
id就是属性节点（任意的属性都是属性节点）
你好就是文本节点（任意的文本都是文本节点）

1.DOM 全称document object model 文档对象模型操作html
html文档由html+css组成 DOM利用js操作html+css的
操作元素节点 element Element 元素节点对象
查获取元素节点的方式

一. 通过选择器获取
1. id选择器 通过id属性来获取元素里面的参数为string类型的id 返回值是一个htmlElement

  var box = document.getElementById("box") //获取id值为box的元素
        console.log(box);

2. class选择器 通过class属性名来获取对应的元素他传入的参数为string类型的class名字
返回值是一个htmlCollectoinof<Element> 返回的是一个集合这个集合里面存储了Element
htmlCollection是类似数组的一种结构具备下标同时具备length属性可能会有多个数据
但是htmlCollection并不是一个数组他不具备数组的方法只是存在对应的下标和length属性

 var content = document.getElementsByClassName("content")
        console.log(content);

所以我们可以通过下标来获取对应的htmlCollection里面的元素
console.log(content[0]);
3.标签选择器 里面传入的是一个标签名字的string字符串返回的也是一个htmlCollection

   var div = document.getElementsByTagName('div')
        console.log(div);//这里是一个htmlCollection

通过下标来进行获取里面的元素
console.log(div[0]);
通过name值来获取返回的类型是一个nodeList nodeList不是htmlCollection
但是他同样具备对应的下标和length属性他的方法比htmlCollection要多
4.nodeList和htmlCollection的区别
var divName = document.getElementsByName('divName')
console.log(divName);
console.log(divName[0]);
5.复合选择器 里面的参数为string类型的选择器返回第一个匹配选择器的元素返回的是一个element

 var selectDiv = document.querySelector("div")
        console.log(selectDiv);

返回所有匹配选择器的元素接收的是一个nodeList

 var selectAll = document.querySelectorAll('.content')
        console.log(selectAll);
        console.log(selectAll[0]);

操作属性节点 attribute Attr属性节点对象设置属性节点
element内置的属性 element.属性名

 var box = document.getElementById("box") //获取id值为box的元素

         className
        console.log(box.className);//返回class名字 同样我们可以进行赋值 set元素属性
        box.className='jack' //设置class属性名
       // id
        console.log(box.id); //获取id名字
        box.id = 'rose'
       // title
        console.log(box.title); //获取title名字 没有为空
        box.title = '刘德华'
       // style 样式操作 element.style.样式名
        box.style.background = 'red' //给背景颜色赋值为红色
        console.log(box.style.background); //获取背景颜色
         //操作文本节点 text   Text文本节点对象 设置文本节点
        innerText 获取显示的文本 赋值就是设置对应的文本
        console.log(box.innerText); //获取里面显示的文本(忽略标签)
         box.innerText = '睡了没' //覆盖之前里面的的所有内容
         box.innerText = '<b>吃了没</b>'  //设置文本 是不会解析里面的标签的
        innerHTML 获取显示的html内容 赋值就是设置对应的html内容
        console.log(box.innerHTML); //会将里面所有的html代码全部获取
        box.innerHTML = '<b>吃了没</b>' //他会解析里面的b标签 显示为html加粗效果

DOM补充

// document.getElementById() //通过id获取 返回的是元素
 // document.getElementsByClassName() //通过class获取 返回的是htmlCollection
 // document.getElementsByTagName() //通过标签名获取 返回的是htmlCollection
// document.getElementsByName() //通过name属性获取 返回的是NodeList
// document.querySelector() //通过选择器获取第一个 返回的是元素
// document.querySelectorAll() //通过选择器获取所有的 返回的是NodeList
// 元素共有属性 赋值就是设置 不赋值就是获取
 //className title id innerText innerHTML style
 //tagName 获取标签名 document表示整个文档
        var content = document.getElementById('content')
        console.log(content.tagName); //tagName是一个只读属性 不能进行设置
        //document表示整个文档 使用document.获取方法 是在全文中进行获取
        //缩小区域进行获取
        var btns = document.getElementsByTagName('button') //里面会包含按钮4
        console.log(btns);
        //缩小区域进行获取
        // 首先获取content这个div 然后再在这个div里面进行获取button
        var innerBtns = document.getElementById('content').getElementsByTagName('button')
        // var content = document.getElementById('content')
        // var innerBtns = content.getElementsByTagName('button')
        console.log(innerBtns);