首页 > 其他分享 >day09 DOM

day09 DOM

时间：2022-10-26 22:26:37浏览次数：66  
标签：box day09 console log DOM 元素 document 节点

DOM的概述

DOM是文档对象模型(document object model) , 顾名思义就是用来操作对应的HTML文档的 .

它是一个遵从文档流的语句 , 是同步机制的 .

DOM的分类

  • document 是dom操作中最大的对象 ( 表示当前操作的html文档 )

  • element 元素对象 ( 表示的是对应的标签元素 )

  • attribute 属性对象 ( 表示的是html标签里所有的属性 )

  • text 文本对象 ( 表示在html代码里面写得所有的文本 )

 

 

 

document ( 文档对象 ) (*)

方法

获取 : 通过对应的表示来获取element元素

  • document.getElementById 通过id获取对应的元素 ( element )

//通过id获取对应的元素,返回的是一个element对象
var box=document.getElementById('box')
console.log(box)
  • document.getElementByClassName 通过className获取 ( HTMLCollection )
//通过class获取相关元素对象,返回的是一个伪数组(HTMLCollection(具备index和length))
var contents=document.getElementByClassName('content')
console.log(contents) //获取到的是HTMLCollection,为伪数组
console.log(contents[0]) //获取第一个匹配到的元素
  • document.getElementByName 通过input的name属性来获取 ( NodeList )
//通过input表单标签的name属性来获取,返回的是一个伪数组(NodeList)
<input name='sex'></input>
console.log(document.getElementByName('sex'))
  • document.getElementByTagName 通过标签名来获取 ( HTMLCollection )
//通过标签名来获取,返回的是个伪数组 ( HTMLCollection )
var div=document.getElementsByTagName('div')
console.log(div)    //( HTMLCollection )
console.log(div[0])    //获取第一个匹配的元素

 

  • document.querySelector 通过选择器获取第一个 ( element )
//根据选择器获取第一个, (id,class,标签,标签名) 返回的是个 element 
console.log(document.querySelector('p'))    //获取标签名为p的标签
console.log(document.querySelector('.box'))    //获取class选择器的标签
console.log(document.querySelector('#item'))    //获取id选择器的标签
console.log(document.querySeletor('div:nth=child(1)'))    //获取div的第一个子元素
  • document.querySelectorAll 通过选择器获取所有的 ( NodeList )

 

//根据对应的选择器获取所有匹配的元素,是个伪数组 
console.log(document.querySelectorAll('#box'))
console.log(document.querySelectorAll('.content'))
console.log(document.querySelectorAll('div'))
//NodeList和HTMLCollection的区别: 
//都是伪数组
//NodeList是以键值对储存
  • document.getRootNode 获取根节点
//根节点
console.log(document.getRootNode())

创建 : 创建对应的节点对象

  • document.createElement 创建元素节点

//创建一个元素,传递对应的标签名
var div=document.createElement('div')
  • document.createAttribute 创建属性节点
//创建一个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.head 获取head

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

...

Element 元素对象 ( * )

方法

获取 : 在元素里面获取元素 , 跟document获取元素的方法一致

element.getElementById()
element.getElementByClassName()
element.getElementByTagName()
element.getElementByName()
element.querySelector()
element.querySelectorAll()
//获取对应的element元素对象
var box=document.getElementById('box')
//在box里获取对应的元素
var link=box.getElementByClassName('link')[0]
console.log(link)
//链式调用
var b=document.getElementById('box').getElementByClassName('link')[0].getElementByTagName('b')[0]
console.log(b)

添加 : 在元素里添加元素,或者是添加text 添加到对应的元素中去

追加到末尾

  • append (追加多个,支持传入string和node(字符串会被识别为文本))

  • appendChild (追加一个,只支持node对象)

//获取元素
var box=document.getElementById('box')
//创建一个p标签
var p=document.createElement('p')
//创建一个文本节点
var text=document.createTextNode('我是文本')
//append和appendChild都是添加到末尾
//对于已经添加的元素不能重复添加(重复会以最后一次为准,就是换了个位置)
box.append('<p>添加的</p>',p,text) //可添加多个,支持string和node,字符串会被识别为文本
var strong=document.createElement('strong')
box.appendChild(strong)

插入到某个子元素之前

  • insertBefore 插入元素到某个子元素之前 ( 参数1写需要传入的元素,参数2写子元素 )

var box=document.getElementsByClassName('box')[0]
var link=document.getElementById('link')
var age=document.createElement('age')
//第一个参数为需要插入的节点,第二个参数为被替换的节点
box.insertBefore(age,link)//把link换成age
//插入只针对子元素,孙子元素会报错
var b=document.getElmentsByClassName('box')[0].getElementById('link').getElementByTagName('b')[0]
box.insertBefore(age,b) //b为孙子节点,会报错

  • insertAdjacentElement 插入Element元素

  • insertAdjacentHTML 插入html代码

  • insertAdjacentText 插入文本

// 'beforebegin': 在该元素本身的前面。
// 'afterbegin':只在该元素当中，在该元素第一个子孩子前面。
// 'beforeend':只在该元素当中，在该元素最后一个子孩子后面。
// 'afterend': 在该元素本身的后面。
var box=document.querySeletor('box')
var hello=document.createElement('hello')
box.insertAdjacentElement('beforebegin',hello)
box.insertAdjacentElement('afterbegin',hello)
box.insertAdjacentElement('beforeend',hello)
box.insertAdjacentElement('afterend',hello)
box.insertAdjacentHTML('afterend','<b>我是插入到box后面的html代码</b>')
box.insertAdjacentText('afterend','<a>我是插入到box后面的文本,html代码识别不了</a>')

删除方法

  • remove 删除自身

  • removeChild 删除子元素

//删除自己 里面内容都删除
box.remove()
//删除子元素 传递对应的子元素
box.removeChild(link)

修改方法

  • replaceChild 一对一替换

  • replaceChildren 替换所有 （可以传递多个参数 支持字符串）

//修改方法
//既可以替换元素 也可以替换文本
var btn = document.createElement('button')
var text = document.createTextNode('我是文字')
//第一个新的节点 第二个对应的子节点
box.replaceChild(btn,link)
//替换里面所有的 变成你传入的
box.replaceChildren('你好',text,btn)

克隆的方法

  • cloneNode

<div>
    <a href="hello">你好</a>
</div>
<script>
    var box = document.querySelector('div')
    //克隆对应的元素 传递的参数是一个布尔类型的值 为true表示深度克隆 为false表示浅克隆
    （false）
    var element = box.cloneNode()//只克隆对应的第一次 默认为false
    console.log(element);//<div></div>
    var element = box.cloneNode(true)//只克隆所有的内容包含对应的里面文本和元素及相关事
    件
    console.log(element);//完整克隆
</script>

属性操作的相关方法 (对于所有的属性都可以进行操作)

  • 获取 getAttribute(attrName)

  • 设置 setAttribute(attrName,attrValue)

  • 删除 removeAttribute(attrName)

//获取属性 通过属性名来获取属性值 后面带NS 表示namespace 命令空间
//传递的是属性名
var attrVal = box.getAttribute('hello')
console.log(attrVal);//hi
//设置属性
//第一个参数属性名 第二个参数为属性值(自动发生隐式转换)
box.setAttribute('age',18)//添加
box.setAttribute('age','20')//修改
//移除属性 根据属性名来移除对应的属性 对于本身带的和后续添加的都可以进行操作
box.removeAttribute('hello')
box.removeAttribute('age')

属性

基础属性

  • id 属性 （获取/设置 id值）

  • className 属性 （获取/设置 class值）

  • style 属性 （获取对应的一个样式对象 / 设置相关样式）

  • title 属性 （获取/设置 title属性）

  • tagName 属性 （只读属性）

  • innerHTML 属性 （显示的html内容 编译对应的html代码）

  • innerText 属性 (显示的文本 不能编译html代码) 

<div id="hello" class="你好" title="点我"><b>你好世界</b></div>
<script>
    var div = document.querySelector('div')
    //元素对象的相关属性 不赋值就是获取 赋值就是设置
    console.log(div.id); //获取对应的id属性值
    div.id = 'hi'
    console.log(div.className); //获取对应的class名字
    div.className = '李丹'
    console.log(div.style); //获取一个样式对象 里面相关属性就是对应的css的样式名
    console.log(div.style.backgroundColor); //获取对应的背景颜色的值
    div.style.backgroundColor = 'red' //设置当前的背景颜色为红色
    console.log(div.title); //获取对应的title属性值
    div.title = '你好'
    console.log(div.innerHTML); //获取里面显示的html代码 (可以识别html代码)
    div.innerHTML = '<a>改变的内容</a>'
    console.log(div.innerText); //获取对应显示的文本 （全部当作文本）
    div.innerText = '<a>改变的内容</a>'
    //不能进行赋值操作
    console.log(div.tagName); //获取对应的标签名 大写的标签名（全大小） （只读）
</script>

节点相关属性（只读属性）

  • previousElementSibling 前面的元素

  • nextElementSibling 后面的元素

  • parentElement 父元素

  • children 子元素集合 （HTMLCollection） 

//前面的元素
console.log(div.previousElementSibling);
//后面的元素
console.log(div.nextElementSibling);
//获取父元素 parentElement 子元素 children
console.log(div.parentElement);//获取到是一个元素
console.log(div.children);//获取到的是一个元素数组 伪数组 HTMLCollection

相关获取元素内属性节点集合的属性（只读属性）

  • attributes

//获取元素内所有的属性节点的属性 返回的是一个伪数组 nameNodeMap (伪数组 map他是存储键值对)
var attrs = div.attributes
console.log(attrs);
console.log(attrs[0]); //获取第一个属性对象
console.log(attrs[0].value); //获取第一个属性对象的属性值
console.log(attrs.id); //获取属性名为id的属性对象
console.log(attrs.id.value); //获取属性名为id的属性值
// nameNodeMap对象拥有的方法
//getNamedNodeItem 传入属性名获取对应的属性对象
console.log(attrs.getNamedItem('class'));
//setNamedNodeItem attr表示attribute对象
var attr = document.createAttribute('class')
attr.value = '渣渣辉'
attrs.setNamedItem(attr)
//removeNamedNodeItem
attrs.removeNamedItem('class')
//item方法获取的方法 通过下标获取
console.log(attrs.item(0));

Node

DOM中的节点分类

  • 元素节点 element

  • 属性节点 attributeNode

  • 文本节点 textNode

节点相关的属性

节点划分的属性 （*）

  • nodeName 节点名

  • nodeType 节点类型

  • nodeValue 节点值

var att = document.createAttribute('class')
att.value = 'box'
var ele = document.createElement('h1')
ele.innerText = 'hello'
var txt = document.createTextNode('文本节点')
//nodeName
console.log(att.nodeName); //属性对应的是属性名
console.log(ele.nodeName); //元素对应的是标签名
console.log(txt.nodeName); //文本对应的是#text
//nodeType (以数值进行划分的 1 2 3 )
console.log(att.nodeType); // 2
console.log(ele.nodeType); // 1
console.log(txt.nodeType); // 3
//nodeValue
console.log(att.nodeValue); // 属性得到是对应的属性值
console.log(ele.nodeValue); // 元素节点得到是null
console.log(txt.nodeValue); // 得到对应的文本值

节点关系的属性 （*）

父子

  • parentElement 父元素

  • parentNode 父节点

  • childNodes 所有的子节点（包含元素节点和文本节点）

  • children 所有的元素节点

兄弟关系

  • previousElementSibling 上一个元素节点

  • previousSibling 上一个节点

  • nextElementSibling 下一个元素节点

  • nextSibling 下一个节点

第一个子节点和最后一个子节点

  • firstChild 第一个子节点

  • firstElementChild 第一个子元素节点

  • lastChild 最后一个子节点

  • lastElementChild 最后一个子元素节点 

<div>
    hello
    <a href="">你好</a>
    <p>
        <a href="">前面的元素节点</a>
        你好
        <a href="">后面的元素节点</a>
    </p>
    你好
</div>
<script>
    //节点的相关关系
    var p = document.querySelector('p')
    //父子关系
    //获取对应的父节点 (一般情况俩者是一样的)
    console.log(p.parentElement); //得到父元素
    console.log(p.parentNode); //得到父节点
    //获取子节点
    console.log(p.parentNode.childNodes); //获取子节点 （包含元素 包含文本） nodeList
    俩个文本 加上一个p标签
    console.log(p.parentNode.children); //获取子元素 （只包含元素节点）HTMLCollection
    p标签
    //兄弟关系
    //上一个
    console.log(p.previousElementSibling); //上一个元素节点
    console.log(p.previousSibling); //上一个节点 （空文本也算节点）
    // 下一个
    console.log(p.nextElementSibling); //下一个元素节点
    console.log(p.nextSibling); //下一个节点
    //第一个子节点
    console.log(p.firstChild); //空文本
    console.log(p.firstElementChild);//a标签
    //最后一个子节点
    console.log(p.lastChild); //空文本
    console.log(p.lastElementChild); //a标签
</script>

节点相关的方法 （*）

  • replaceChild 替换子节点

  • appendChild 添加子节点

  • removeChild 删除子节点

  • insertBefore 插入节点到子节点前面

  • cloneNode 克隆节点

  • replaceChildren 替换所有子节点

  • append 添加多个子节点

  • remove 移除自己及所有的子节点

操作属性节点的方法

  • setAttributeNode （属性节点 Attribute对象）

  • getAttributeNode （返回的是一个属性节点 Attribute）

  • removeAttributeNode （根据对应的属性节点删除）

<div id="box"></div>
<script>
    //运用相对较少
    var box = document.getElementById('box')
    //获取属性节点 返回时一个attribute对象
    //传入一个string类型的属性名
    console.log( box.getAttributeNode('id'));
    console.log( box.getAttributeNode('id').value);
    //设置对应的属性节点 传入的是一个attribute对象
    var attr = document.createAttribute('class')
    attr.value = 'content'
    box.setAttributeNode(attr)
    //removeAttributeNode 根据属性节点对象来删除删除对应的属性节点
    box.removeAttributeNode(box.attributes[0]) //删除第一个属性节点
</script>

删除空文本节点的相关方法

<div>
    <a href="">嘻嘻</a>
    <b>哈哈</b>
    hello
</div>
<script>
    var div = document.querySelector('div')
    //获取div的所有子节点
    console.log(div.childNodes.length);//5
    //传入一个元素 删除里面的空文本节点
    function deleteEmptyTextNode(element){
        //获取所有的子节点
        var nodes = element.childNodes
        //遍历所有的子节点
        for(var node of nodes){
            //进行判断 判断当前是否为空文本节点
            if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){
                //删除对应的空文本节点
                element.removeChild(node)
            }
        }
    }
    deleteEmptyTextNode(div)
    console.log(div.childNodes.length);//3
</script>

 

标签：box,day09,console,log,DOM,元素,document,节点
From： https://www.cnblogs.com/itlulu/p/16830284.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99