Day09 DOM

weixin_51421372

已于 2022-11-27 23:48:19 修改

阅读量227

点赞数

文章标签： javascript 前端 html5

于 2022-11-26 10:44:21 首次发布

本文链接：https://blog.csdn.net/weixin_51421372/article/details/128047658

版权

Day09 DOM

DOM的概述

DOM（document object model）文档对象模型，顾名思义他就是用于操作对应的文档的，也就是操作你写的html文档。DOM是一个遵从文档流的语句。所以他是同步机制。

DOM的分类

document dom操作中最大的对象（表示当前操作的html文档）
element 元素对象（表示的是对应的标签元素）
attribute 属性对象（表示的所有的html标签里面的属性）
text 文本对象（表示在html代码里面写的所有的文本）

document (文档对象)（*）

获取通过对应的标识来获取element元素

根据id来回去元素(唯一)

document.getElementById(‘’) 通过id获取对应的元素（Element）
get 获得 element 元素 by 通过
参数里面是一个字符串 (必须加引号)
返回的是一个元素对象(object)

//通过对应的id获取相关元素对象 返回的是一个element对象
var box = document.getElementById('box')
console.log(box);

根据类名返回元素对象集合**

document.getElementsByClassName(‘类名’) 通过className获取（HTMLCollection）
直接用类名来获取

//通过对应的class获取相关元素对象数组 (HTMLCollection (伪数组 具备下标 具备length))
var contents = document.getElementsByClassName('content')
console.log(contents);//获取HTMLCollection
console.log(contents[0]);//获取第一个匹配的元素

根据标签名获取

document.getElementsByTagName(‘标签名’) 通过标签名获取（HTMLCollection） 会把页面中所有元素都获得
返回的是获取过来元素的集合 以伪数组的形式储存
得到是一个元素的集合,操作里面的元素需要遍历
document.getElementsByName 通过name属性获取（NodeList）

//根据name属性名来获取对应的元素（表单标签）NodeList
console.log( document.getElementsByName('sex'));

通过query获取第一个

document.querySelector 通过选择器获取第一个（Element）(获取html中从上至下的第一个)
返回指定选择器的第一个元素对象
选择器需要加符号 .box #id

//根据对应的选择器获取 id # class . 标签 标签名 返回的都是元素对象
//querySeletor 获取匹配选择器的第一个元素 
console.log(document.querySelector('#box'));//返回匹配的元素对象
console.log(document.querySelector('.content'));//返回第一个找到的元素
console.log(document.querySelector('div'));//返回第一个找到的元素
console.log(document.querySelector('div:nth-child(1)'));//返回第一个找到的元素

document.querySelectorAll 通过选择器获取所有（NodeList）(多个,可通过[]指定)

//根据对应的选择器获取所有匹配的 NodeList的伪数组
console.log(document.querySelectorAll('#box'));
console.log(document.querySelectorAll('.content'));
console.log(document.querySelectorAll('div'));
//NodeList和HTMLCollection的区别 NodeList里面的存储以键值对存储

document.getRootNode 获取根节点（Node）

//根节点
console.log(document.getRootNode());

创建的相关方法创建对应的节点对象

document.createElement 创建元素节点

//创建一个元素 传递对应的标签名
var element = document.createElement('div')
console.log(element);

document.createAttribute 创建属性节点

//创建属性 id = 'box' 传递属性名
//创建一个id属性 默认值伪空字符串
var attr = document.createAttribute('id')
//给当前属性对象指定对应的属性值
attr.value = 'hello world'
console.log(attr);//id = 'hello world'
console.log(typeof attr);//object

document.createTextNode 创建文本节点

//创建文本节点 传递的参数是显示的文本
var text = document.createTextNode('hello')
console.log(text); // "hello"
console.log(typeof text); //object

属性

获取属于文档的相关内容

document.body 获取body

document.body

document.head 获取head

document.head

document.froms 获取froms (返回一个HTMLCollection)

document.froms

属性操作

获取元素的所有属性 元素.attributes
设置元素的该属性 元素.setAttribute(‘属性名’,‘属性值’)
获取元素的该属性 元素.getAttribute(‘属性名’)
删除元素的该属性 元素.removeAttribute(‘属性名’)

     //获取img所有属性
      btns[0].onclick=function(){
        console.log(img.attributes);
      }
      //设置img的src属性
      btns[1].onclick=function(){
        // img.src='./images_07.jpg'
        img.setAttribute('src','./images_07.jpg')
      }
      //获取img的src属性
      btns[2].onclick=function(){
        // console.log(img.src);//获取src的绝对路径
        console.log(img.getAttribute('src'));//获取src的相对路径
      }
      //删除img的src属性
      btns[3].onclick=function(){
        img.removeAttribute('src')
      }

节点关系

 		//parentNode
        var li3 = document.getElementById('li3')
        li3.parentNode.style.border = '1px solid red' 
        console.log(li3.parentNode);//返回ul
        //childNodes
        var ul = document.querySelector('ul')
        console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li#li3, text, li, text, li, text]
        console.log(ul.childNodes.length);//length 11会包含空格(文本节点) 
         //children
        console.log(ul.children);//HTMLCollection(5) [li, li, li#li3, li, li, li3: li#li3]
        console.log(ul.children.length);//5

方式一利用 childNodes 做各行换色

		var list = []
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                list.push(ul.childNodes[i])
            }
        }
        list.forEach((item, index) => {
        //     item.style.background = index % 2 == 0 ? 'green' : 'greenyellow'
        })

方式二利用children 做隔行换色

 		for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].style.background = i % 2 ? 'blue' : 'green'
        }

获取节点

获得父亲或者儿子

子.parentNode 获得的是父亲
子.offsetParent 获得的是最近带有定位的父亲,找不到就会找到body
childNodes 儿子包含文本节点和元素节点(w3c) 父.childNode
children 只包含所有的元素节点 (微软),在ie678下会把注释当做元素节点 父.children

父子关系

父.childNodes 获得所有的子节点包括文本节点和属性节点
父.children 获得所有的子节点只有属性节点 ie678受限制
父.lastElementChild || 父.lastChild 获得父亲里最后一个儿子
父.firstElementChild || 父.firstChild 获得父亲里第一个儿子
父.children[下标] 获得父亲里任意一个儿子

兄弟关系

获得上一个兄弟兄弟.previousElementSibling || 兄弟.previousSibling
获得下一个兄弟兄弟.nextElementSibling || 兄弟.nextSibling

		//获取第一个节点
        var first = ul.firstElementChild || ul.firstChild
        first.style.background = 'red'
        //获取最后一个节点
        var last = ul.lastElementChild || ul.lastChild
        last.style.background = 'pink'
        //指定中间某一个
        ul.children[2].style.background = 'yellow'

        //上一个兄弟  
        var prev = li3.previousElementSibling || li3.previousSibling
        prev.style.background = 'green'

        //下一个兄弟
        var next = li3.nextElementSibling || li3.nextSibling
        next.style.background = 'white'

创建节点

创建圆

<button>创建圆</button>
    <script>
        var btn = document.querySelector('button')
        btn.onclick=function(){
            //1.创建div
            var box =document.createElement('div')
            //2.给div设置文字
            var oText =document.createTextNode('小日子过的不错')
            //3.设置样式
            box.style.width='200px'
            box.style.height='200px'
            box.style.background='red'
            box.style.borderRadius='50%'
            //4.文字要与div关联
            box.appendChild(oText)
            //5.将box添加到body
            document.body.appendChild(box)
        }

类样式的添加

classlist是一个对象

add(‘box1’) 添加box1这个样式
remove(‘box1’) 删除box1样式
contains(‘box1’) 是否包含box1这个样式
toogle(‘box2’) 在之前存在的样式与box2之间来回切换
replace(‘原样式’, ‘新样式’) 将原样式替换为新样式

className 他的值必须是字符串通过 = 赋值

box.claasName = ‘fox’


        var btns = document.querySelectorAll('button')

        var div = document.createElement('div')
        //设置初始样式
        div.style.width = '200px'
        div.style.height = '200px'
        div.style.border = '5px solid pink'
        console.log(div);
        document.body.appendChild(div)
        //添加样式box1
        btns[0].onclick = function () {
            div.classList.add('box1')
        }
        //删除样式box1
        btns[1].onclick = function () {
            div.classList.remove('box1')
        }
        //切换样式为box2 切换可以来回切换
        btns[2].onclick = function () {
            div.classList.toggle('box2')
        }
        //判断是否存在样式box2
        btns[3].onclick = function () {
            console.log(div.classList.contains('box2'));
        }
        //将box2这个样式替换box3.replace('旧样式名','新样式名')
        btns[4].onclick = function () {
            div.classList.replace('box2', 'box3');
        }

插入

父.insertBefore(新的元素,参照物) 插在参照物之前
insertBefore 的第二个参数为null时 和appendChild 一样相当于成为父亲的最后一个娃

 //获得所有的按钮
        var btns = document.querySelectorAll('button')
        //获得li3
        var li3 = document.querySelector('#li3')
        //创建div

        //插在3前面
        btns[0].onclick = function () {
            var div = document.createElement('div')
            div.innerHTML = '我是添加的元素'
            div.className='a'
            div.classList.add('font')
            li3.parentNode.insertBefore(div, li3)
        }
        //插在3后面
        btns[1].onclick = function () {
            var div = document.createElement('div')
            div.innerHTML = '我是添加的元素'
            div.classList.add('a')
            var li4 = li3.nextElementSibling || li3.nextSibling
            li3.parentNode.insertBefore(div, li4)
        }
        //插在最后
        btns[2].onclick = function () {
            var div = document.createElement('div')
            div.innerHTML = '我是添加的元素'
            li3.parentNode.insertBefore(div, null)
        }

替换

父.replaceChild(新的元素,被替换的元素)

		var li3 =document.querySelector('#li3')
        var btn =document.querySelector('button')
        var li4 =li3.nextElementSibling||li3.nextSibling
        btn.onclick=function(){
            var a =document.createElement('a')
            a.href='http://www.qq.com'
            a.innerHTML='我 是文字'

            var comment =document.createComment('我是注释')
            a.appendChild(comment)

            li3.parentNode.replaceChild(a,li3)
        }

删除

父.removeChild(儿子) 父亲删除这个儿子
自己.remove() 自己删自己

  //父.removeChild(子)
        var li3 =document.querySelector('#li3')
        var btns =document.querySelectorAll('button')
        var li4 =li3.nextElementSibling||li3.nextSibling
        btns[0].onclick=function(){
            li3.parentNode.removeChild(li4)
        }
        btns[1].onclick=function(){
            li3.remove()//自杀
        }

克隆

自己.cloneNode(true/fasle)

cloenNode 参数为false 表示浅克隆
浅克隆只克隆自身的结构 ,不会克隆子元素和文本
cloenNode 参数为true 表示深克隆
深克隆会克隆自身的结构 ,也会克隆子元素和文本

   var box =document.querySelector('.box')
        var btns =document.querySelectorAll('button')
        //浅克隆
        btns[0].onclick=function(){
            var obox=box.cloneNode(false)
            document.body.appendChild(obox)
        }
        //深克隆
        btns[1].onclick=function(){
            var obox=box.cloneNode(true)
            document.body.appendChild(obox)
        }

this指向问题

在对象中的方法中的this指向该对象
在事件内的方法指向该事件的调用者

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</body>
    <script>
        var btns =document.querySelectorAll('button')
        for(var i =0 ;i<btns.length;i++){
            btns[i].onclick=function(){
                //排他思想先给所有的按钮添加为空
                for(var j =0;j<btns.length;j++){
                    btns[j].style.background=''
                }
                console.log(this);//指向点击的按钮
                //再给每个添加颜色
                this.style.background='red'
            }
        }

    </script>

下标 获得下标的两种方法

藏值
forEach 获得下标(只有document.querySelementorAll获得的才有此方法)

var btns = document.querySelectorAll('button')
        for (var i = 0; i < btns.length; i++) {
            //藏值 获得下标i
            btns[i].index = i
            btns[i].onclick = function () {
                console.log(this.index);
            } 
        }

        foreach 获得下标
        btns.forEach((item, index) => {
           item.onclick=function(){
            console.log(index);
           }
        })