JavaScript-DOM对象

最新推荐文章于 2024-06-12 11:59:04 发布

小墨Sang

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量226

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/xmosang/article/details/122707500

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Document Object Model 文档对象模型

浏览器网页就是一个DOM树形结构

更新：更新DOM节点
遍历：获得所有的DOM 节点
删除：删除一个DOM 节点
添加：添加一个DOM 节点

要操作一个DOM节点，就要先获得一个DOM 节点

在这里插入图片描述

树形结构中的每一个点都是一个DOM节点

<body>
<h1><p>hello</p></h1>
<div id="div"><p></p></div>
<p class="p">p</p>
<ll id="ll">
    <li id="li">java</li>
    <li>c</li>
</ll>
</body>

8.1、获取DOM节点

<script>
    //对应css选择器
    var h1=document.getElementsByClassName('h1'),//标签名
    	div1=document.getElementById('div'),//id名
    	p1=document.getElementsByClassName('p'),//class名
    	child=div1.children,//获取父节点下的所有子节点
        li=document.getElementById('li');
    div1.firstElementChild//获得第一个子节点
	div1.firstChild
    div1.lastElementChild//获得最后一个子节点
	div1.lastChild
    li.parentElement//获取父节点
    ll.children[0]
    ll.children[1]//通过下标获取节点
</script>

除了getElementById获取的是单一节点外，其他getElementsByClassName与getElementsByClassName返回的都是一个数组

8.2、更新DOM节点

修改文本值

div1.innerText='123'//修改文本的值
div1.innerHTML='<h2>hello</h2>'//HTML文本标签

修改css样式

ll.style.color='red'
ll.style.fontSize='30px'
ll.style.padding='30px'

8.3、删除DOM节点

先获取父节点，在删除自己

var li=document.getElementById('li');//查找要删除的节点
var father=li.parentElement//寻找他的父节点
father.removeChild(li);//通过父节点来删除
//也可以直接删除自己
li.remove()

删除节点是一个动态的过程，在删除多个节点时，避免使用children[]下标删除

8.4、插入DOM 节点

在获得某个DOM节点后，若该节点为空，则可使用innerHTML来插入元素

若该节点不为空，使用innerHTML插入时则会覆盖原来的内容

<body>
<p id="p">p</p>
<div id="div">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>
</body>
<script>
    var p=document.getElementById('p'),
        div1=document.getElementById('div1');
    div1.append('111')//直接添加元素
    div1.append(p)//添加其他节点
</script>

创建一个新节点

var ll=document.createElement('ll');//创建一个ll标签
ll.id='ll';
ll.style.color='red'
ll.innerHTML='<li>hello</li>'
div.appendChild(ll)//后插

创建一个新标签

var myscript=document.createElement('script')
myscript.setAttribute('type','text/javascript')//键值对key,value,key,value
div.appendChild(myscript)

insertBefore （在之前插入）

div.insertBefore(p,div1)//前插节点 将p节点插在div1j
//操作节点必须是要插入位置的父节点

小墨Sang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM对象

Document Object Model 文档对象模型浏览器网页就是一个DOM树形结构更新：更新DOM节点遍历：获得所有的DOM 节点删除：删除一个DOM 节点添加：添加一个DOM 节点要操作一个DOM节点，就要先获得一个DOM 节点树形结构中的每一个点都是一个DOM节点<body><h1><p>hello</p></h1><div id="div"><p></p></div&g
复制链接

扫一扫