day9 DOM上

一、

　　// DOM 全称documnet object model  文档对象模型

        // 由html+css组成 DOM利用js操作html+css的

        // div 就是元素节点  (任意的标签都是元素节点)

        // id 就是属性节点  (任意的属性都是属性节点)

        // 你好  就是文本节点  (任意的文本就是文本节点)

       

        // 操作元素节点  elemnet  Element 元素节点对象

        // 操作属性节点  attribute Attr 属性节点对象

        // 操作文本节点  text  Text文本节点对象

 

二、元素节点的获取

            // 通过选择器获取

 

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

            document.getElementById()

 

            // class选择器  通过class属性名来获取元素   他传入的参数为string类型的class名字  返回值是一个htmlCollection<Element>  返回的是一个集合  这个集合存储了Element

            // htmlCollection<Element>是类似数组的一种结构 具备下标同时具备length属性  可能有多个数据

            //但是htmlCollection<Element>并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性

            document.getElementsByClassName()//可以通过下标来获取里面对应的元素

 

            // 标签选择器  里面传入的是一个标签名字的string字符串  返回的也是htmlCollection

            document.getElementsByTagName()//通过下标获取里面的元素

 

            // 复合选择器  里面的参数为string类型的选择器  返回第一个选择器匹配的元素  返回的是一个element

            document.querySelector()

            document.querySelectorAll()//返回所有匹配选择器的元素  接收的是一个nodeList

 

            // 通过name值获取  返回的类型是一个nodeList  不是htmlCollection

            // 他同样具备对应下标和length属性  他的方法比htmlCollection要多

            document.getElementsByName()

 

            // nodeList和htmlCollection的区别

 

三、操作属性节点 attribute Attr属性节点对象   设置属性节点

            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' //获取id名字

            //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加粗效果

 

五、总结

            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表示整个文档  是个只读属性  不能进行设置

 

            // document表示整个文档  使用document获取方法  是在全文中进行获取

 

            // 缩小区域进行获取

            document.getElementsByTagName("button")//里面会包含按钮4

            // 首先获取content这个div  然后在这个div里面获取button

            document.getElementById('content').getElementsByTagName('button')

 

六、节点共有属性(元素节点有属性节点也有文本节点也有)

        var title = document.getElementsByTagName('title ')[0]

        console.log(title.nodeName); //nodeName 节点名称

        console.log(title.nodeType); //nodeType 节点类型1元素节点2属性节点3文本节点

        console.log(title.nodeValue); //节点值  元素节点为null 属性节点 属性值  文本节点 文本值

        //子节点

        var box=document.getElementById('box')

        box.childElementCount//返回节点的元素个数

        box.childNodes//返回所有的节点集合 返回类型是一个nodeList

        box.children//返回子元素 返回的是一个htmlCollection