【JavaScript】学习第十二天(DOM节点)

【JavaScript】学习第十二天(DOM节点)1.什么是DOM节点DOM树:DOM以树状结构出现的(倒立的树),方便开发人员获取,添加,删除和修改页面上的某一部分DOM节点:w3c,页面上所有的内容都可以称为节点,DOM的最小单元就是节点DOM节点的种类:节点包含

1.什么是DOM节点

DOM树:

DOM以树状结构出现的(倒立的树),方便开发人员获取,添加,删除和修改页面上的某一部分
在这里插入图片描述

DOM节点:

w3c,页面上所有的内容都可以称为节点,DOM的最小单元就是节点

DOM节点的种类:

节点包含一共12种,本节课就认识5种节点

  • 1.元素节点: 标签: nodeType 1
  • 2.属性节点: 属性: nodeType 2
  • 3.文本节点: 文本: nodeType 3
  • 4.注释节点: 注释: nodeType 8
  • 5.文档节点: 文档: nodeType 9

2.如何获取节点:

通过节点关系(父子关系,兄弟关系)来获取

//获取父元素的第一个节点
父节点.firstChild

//节点的下一个兄弟节点
节点.nextSibling

//节点的上一个兄弟节点
节点.previousSibling

//父节点的最后一个字节点
父节点.lastChild

//节点的父节点
节点.parentNode

//获取所有的子节点(伪数组形式)
父节点.childNodes

3.获取元素节点:

//获取父元素的第一个元素节点
父节点.firstElementChild

//节点的下一个兄弟元素节点
节点.nextElementSibling

//节点的上一个兄弟元素节点
节点.previousElementSibling

//父节点的最后一个子元素节点
父节点.lastElementChild

//节点的父元素节点(兼容性不好,不用它)
节点.parentElement

//获取所有的子元素节点(伪数组形式)
父节点.children

4.节点的操作

创建节点:

语法:document.createElement('标签名')
返回值:创建好的元素节点

//1. 创建的节点
    var oBtn = document.createElement('button');
    console.log(oBtn);
    oBtn.innerText = '我是按钮'

    var oBox = document.getElementById('box')
追加节点:

语法:父节点.appendChild(子节点)
含义:将子节点追加到父节点的尾部
例子:document.body.appendChild(子节点)

 oBox.appendChild(oBtn);
 //把创建好的oBtn添加到oBox中
插入节点:

语法:父节点.insertBefore(子节点,谁的前面的谁)
含义:将子节点插入到父节点的指定位置
例子:oBox.insertBefore(oBtn,oBox.firstChild);将button插入到oBox的头部

oBox.insertBefore(oBtn,oBox.children[1])
//父节点.children: 数组,所有的标签
替换节点

语法:父节点.replaceChild(新节点,旧节点(位置)) 不常用
含义:在父节点内,将老节点替换成新节点

oBox.replaceChild(oBtn,oBox.children[1])
删除节点:

语法1:父节点.removeChild(子节点)
含义:把子元素从父元素中移除
语法2:节点.remove() 最常用
含义:把子元素从页面中删除

oBox.children[0].remove();
oBox.removeChild(oBox.children[0])
克隆节点

语法:节点.cloneNode(turn/false)
作用:克隆出来一个节点
turn:代表克隆元素本身和元素的子元素以及后台
false:代表克隆元素本身

console.log(oBox.cloneNode(false));
console.log(oBox.cloneNode(true));
节点属性
  • nodeType:节点属性
  • nodeName:节点名称
  • nodeValue:节点值

5.获取行间样式和非行间样式

var tianIn = document.querySelector('div');

//获取行间样式
tianIn.style.width
window.getComputedStyle(tianIn, null)['width'];

//获取非行间样式
window.getComputedStyle(tianIn, null)['width'];

今天的文章【JavaScript】学习第十二天(DOM节点)分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/86971.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注