DOM 文档对象模型使用教程来喽!

菜园前端
• 阅读 341

原文链接:https://note.noxussj.top/?source=helloworld


HTML 模板

<html>
    <head>
        <title>我是网站标题</title>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>

        <div name="xiaoming"></div>

        <div id="box"></div>
    </body>
</html>

访问节点

通过 id 访问指定节点 getElementById

var node = document.getElementById('box')

通过 name 访问指定节点 getElementsByName

var node = document.getElementsByName('xiaoming')

通过标签名称访问指定节点 getElementsByTagName

var node = document.getElementsByTagName('div')

通过 class 访问指定节点 getElementsByClassName

var node = document.getElementsByClassName('box')

全能访问指定节点 querySelector

// 通过id访问
var node = document.querySelector('#box')

// 通过class访问
var node = document.querySelector('.box')

// 通过tag访问
var node = document.querySelector('div')

全能访问所有节点 querySelectorAll

// 通过id访问
var node = document.querySelectorAll('#box')

// 通过class访问
var node = document.querySelectorAll('.box')

// 通过tag访问
var node = document.querySelectorAll('div')

访问子节点 childNodes

node.childNodes

访问父节点 parentNode

node.parentNode

访问下一个兄弟节点 nextElementSibling

node.nextElementSibling

访问上一个兄弟节点 previousElementSibling

node.previousElementSibling

插入节点

插入子节点(排在最后) append

var node = document.querySelector('.box')

var newNode = document.createElement('div')

node.append(newNode)

插入子节点(排在最后) appendChild

var node = document.querySelector('.box')

var newNode = document.createElement('div')

node.appendChild(newNode)

在指定子节点前面插入节点 insertBefore

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

var newNode = document.createElement('div')

node.insertBefore(newNode, childNode)

创建节点

创建元素节点 createElement

var newNode = document.createElement('div')

创建文本节点 createTextNode

var newTextNode = document.createTextNode('我是内容')

删除节点

删除当前节点 remove

var node = document.querySelector('.box')

node.remove()

删除子节点 removeChild

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

node.removeChild(childNode)

修改节点

替换子节点 replaceChild

var node = document.querySelector('.box')

var childNode = document.querySelector('.box1')

var newNode = document.createElement('div')

node.replaceChild(newNode, childNode)
点赞
收藏
评论区
推荐文章
皮卡皮卡皮 皮卡皮卡皮
3年前
javaScript. Dom 基本操作
DOM节点查找jsdocument.getElementById()//通过id查找document.getElementsByTagName()//通过标签名document.getElementsByName()//通过name名查找document.getElementsByClassName("类名")//通过类名获取元素对象documen
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Stella981 Stella981
2年前
List的Select 和Select().tolist()
List<PersondelpnewList<Person{newPerson{Id1,Name"小明1",Age11,Sign0},newPerson{Id2,Name"小明2",Age12,
Stella981 Stella981
2年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Wesley13 Wesley13
2年前
GoJS API学习
varnode{};node"key""节点Key";node"loc""00";//节点坐标node"text""节点名称";//添加节点通过按钮点击,添加新的节点到画布myDiagram.model.addNodeData(nod
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
2年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
小万哥 小万哥
6个月前
DOM(文档对象模型):理解网页结构与内容操作的关键技术
DOM(文档对象模型)定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口,允许程序和脚本动态访问和更新文档的内容、结构和样式。HTMLDOM用于操作HTML文档,而XMLDOM用于操作XML文档。HTMLDOM示例通过ID获取并修改HTML元素的