操作DOM对象

操作DOM对象

DOM:文档对象模型

img

1. 核心

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

  • 更新:更新Dom节点
  • 遍历Dom节点:得到Dom节点
  • 删除:删除一个Dom节点
  • 添加:添加一个新的节点

2. 获得Dom节点

要操作一个Dom节点,就必须要先获得这个Dom节点

//对应CSS选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children;     //获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;

这是原生代码,之后我们尽可能使用jQuery

3. 更新节点

<div id="id1">
    123
</div>

<script>
    let id1 = document.getElementById('id1');
</script>

1. 操作文本

  • id1.innerText='改变后'	;		//修改文本的值
    
  • id1.innerHTML='<strong>123</strong>'	;//可以解析HTML文本标签
    

2. 操作CSS

id1.style.color = 'red';
id1.style.fontSize = '200px';		//注意此处为驼峰命名,并不是CSS中的下划线命名
id1.style.padding = '2em';

4. 删除节点

删除节点的步骤:先获取父节点,再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
	let self = document.getElementById('p1');	//要删除的当前节点
    let father = p1.parentElement;				//找到其父节点
    father.removeChild(self);					//通过父节点(father)删除该节点(self)
    
    //删除是一个动态的过程:
    //以下的操作是错误的
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[3]);
</script>

注意:删除多个节点的时候,children是在时刻变化的,删除节点的时候一定要注意!

5. 插入节点

我们获得了某个DOM节点,假设这个Dom节点是空的,我们通过innerHTML就可以增加一个元素了。但是这个DOM节点已经存在元素时,我们就不能这么干了,会产生覆盖

1. 追加(将已存在的节点移到后面)

<p id="js">JavaScript</p>

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    let
        js = document.getElementById('js');
        list = document.getElementById('list');
    list.appendChild(js);			//追加到后面
</script>

2. 创建一个新的标签,实现插入

<script>
    let
        js = document.getElementById('js');     //已存在的节点
        list = document.getElementById('list');
    //通过JS 创建一个新的节点
    let newP = document.createElement('P');     //创建一个P标签
    newP.id = 'newP';
    newP.innerText = 'Hello,administrator!';
    list.appendChild(newP);
    //创建一个标签节点 (通过这个属性,可以设置任意的值)
	let myScript = document.createElement('script');
	myScript.setAttribute('type','text/javascript');
    //可以创建一个style标签
    let myStyle = document.createElement('style');                  //创建了一个空style标签
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: red;}';             //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle);  //将设置好的标签插入到head节点下,注意,TagName返回的是一个数组!

</script>

3. insertBefore

let ee = document.getElementById('ee');
let js = document.getElementById('js');
//要包含的节点.insertBefore(newNode,targetNode)
let list = document.getElementById('list');
list.insertBefore(js,ee);

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

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)