JavaScript操作DOM对象

最新推荐文章于 2022-05-26 16:03:26 发布

陆源东

最新推荐文章于 2022-05-26 16:03:26 发布

阅读量131

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_53509974/article/details/116918148

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JavaScript操作DOM对象

DOM : 文档对象模型

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

更新DOM节点
遍历DOM节点：获取DOM节点
删除DOM节点
增加DOM节点

DOM文件树
在这里插入图片描述

获得节点并操作 document.getElementById(’’) ;

<body>
<div id="parent">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
</body>

父子与定位操作 (根据标签)

var parent = document.getElementById('parent');  //通过id获得父节点div
var childrens = parent.children; //获得父节点的所有子节点（一个数组）
var first = parent.firstChild() ; //获取父节点的第一个子节点
var last = parent.lastChild() ; //获取父节点的最后一个子节点

var p1 = document.getElementById('p1');
var lastOne = p1.lastChild(); //p1的上一个节点
var nextOne = p1.nextElementSibling(); //p1的下一个节点

根据其他元素定位

//根据标签名定位
var body = document.getElementByTagName('body');
//根据name定位
var node = document.getElementsByName('');
//通过class定位
var body = document.getElementsByClassName('')

更新节点

//修改文本
p1.innerText = 'Content' ;  //修改节点的文本 innerText = ' '
p1.innerHTML = '<strong><span>Content</span></strong>' ; //使用HTML方式修改节点的文本
//修改CSS node.style
p1.style.fontSize = '20px'; //字体大小
p1.style.color = 'blue'; //字体颜色


var su = document.getElementById('su') // 在百度主页找到百度一下按钮
su.style.background = 'green';//修改按钮背景色为绿色

删除节点

//子节点自我删除
p1.remove();  
//父节点删除子节点
parent.removeChild(parent.children[0]) ; //删除的同时parent.children数组也会改变

追加与插入节点

追加操作

追加已经有节点的情况下

<body>
<div id="list">
    <p id="l4">4</p>
    <p id="l1">1</p>
    <p id="l2">2</p>
    <p id="l3">3</p>
</div>
</body>

var list = document.getElementById('list');
var l4 = document.getElementById('l4');
list.appendChild(l4); 
list.append(l4); 
//append()与appendChild()的区别
append()可以传入多个节点或字符串，没有返回值
append()只能传入一个节点，不支持传入字符串

在这里插入图片描述

2.创建一个新的节点

<script>
    var list = document.getElementById('list');
    var newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP'; //设置新标签id
    newP.innerHTML='<strong>newP</strong>'; //设置新标签内容 
</script>
list.append(newP);

创建具有属性的标签节点 (动态设置属性)

var scr = document.createElement('script'); //创建script标签
scr.setAttribute('type','text/javascript');//设置type属性为'text/javascript'

动态插入一个CSS

var myCSS = document.createElement('style');
myCSS.setAttribute('type','text/css');
myCSS.innerHTML = 'body{background:aqua}';
var head =document.getElementsByTagName('head');
head[0].append(myCSS);

确定位置地插入节点 list.insertBefor(newNode,oldNode)

jvar l2 = document.getElementById('l2');
var list = document.getElementById('list');
var l4 = document.getElementById('l4');
list.insertBefore(l4,l2);  //在list父节点里面 ， 把l4节点插入到l2节点之前