原生js操作DOM

最新推荐文章于 2023-11-08 14:13:56 发布
最新推荐文章于 2023-11-08 14:13:56 发布
阅读量611 收藏 1
点赞数 1
分类专栏： JS 文章标签： DOM操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/84324690
版权

目录

一、DOM操作

DOM 是 Document Object Model（文档对象模型）的缩写。
所有的DOM Element可以点击访问。

DOM操作名称方法描述
（1）获取元素
通过IDdocument.getElementById();得到一个元素
通过标签父级.getElementsByTagName();数组
通过class父级.getElementsByClassName();获取到元素数组，IE8及以下不支持
通过css选择器父级.querySelector()得到一个元素，IE7及以下不支持
父级.querySelectorAll()获取到元素数组，IE7及以下不支持
（2）增加元素
添加节点para.appendChild(node);向para添加子节点node
（3）创建节点
创建元素var para=document.createElement(“p”);在document中创建p标签元素
创建文本节点var node=document.createTextNode(“这是新段落。”);在document中创建文本节点
（4）移除元素
删除节点parent.removeChild(child);父元素删除子节点
（5）获取元素的样式
获取行间样式element.style.styleName获取行间样式，不能获取css样式表中的样式
获取样式表中的样式element.currentStyle.styleName返回的值有单位，仅IE支持
getComputedStyle(element).styleName返回的值有单位 ,标准浏览器支持(IE9及以上支持)
（6）属性操作
获取属性element.getAttribute(‘attributeName’)属性的值
element.attribute属性的值
element[‘attribute’]属性的值
设置属性值element.setAttribute(‘attributeName’)dom元素上查看会有该属性
不能通过element.attribute获取只能通过 element.getAttribute(‘attributeName’)
移除属性element.removeAttribute(‘attributeName’)dom元素查看无此属性

1.1内容操作

1.1.1表单元素

对于input这种半闭合标签，操作内容是操作它的value值。
（1） 获取value —> 元素.value
（2）设置value —> 元素.value = 值

<input type="text" id="text1">
<input type="button" value="按钮" id="btn">
<input type="text" id="text2">

js操作

var text1 = document.getElementById('text1');
var text2 = document.getElementById('text2');
var btn = document.getElementById('btn');
btn.onclick = function() {
   var t = text1.value; // 获取input元素的内容
   text2.value = t; // 设置值
}

点击按钮，id为text2的标签值会发生变化。

1.1.2闭合标签

和半闭合标签不同，闭合标签的内容都是获取innerHTML或者innerText值。
（1） 获取：元素.innerHTML    元素.innerText
（2）设置：元素.innerHTML = 新值   元素.innerText = 新值
两者区别：innerHTML可以解析字符串中的标签，常常在渲染页面的时候用字符串拼接。

document.getElementById("box").innerHTML = "<span>天气有点冷</span>";
document.getElementById("box").innerText = "天气有点冷";

1.2属性操作

1.2.1闭合标签

（1）获取属性：元素.属性名
（2）设置属性：元素.属性名 = 新值

document.getElementById("box").title = 'hobby';
//浏览器查看元素title属性

1.2.2表单元素

获取和设置与上面方法一样

 <input type="text" id="tex">
 var t = document.getElementById('tex');
 t.onclick = function() {
     t.type = 'button';
     t.value = '按钮';
 }   //点击输入框，瞬间会变成按钮

1.3 样式操作

1.3.1行间样式

  • （1）获取行间样式：

    element.style.样式名（只能获取行间样式），这样获得的属性值是带单位的.

  • （2）设置行间样式：
    • <1>元素.style.样式名 = 样式值  
    • <2>元素.style.cssText =“属性名：属性值；······” ；不推荐使用
//可以单个设置样式
var oBox = document.getElementById('box');
oBox.style.width = '200px'
oBox.style.width = '200px';
oBox.style.height = '200px';
oBox.style.backgroundColor = 'brown';
oBox.style.color = 'yellow';
oBox.style.fontSize = '30px';
//也可以写在一起
oBox.style.cssText = 'width: 200px;height: 200px;background: brown; color: yellow; font-size: 30px;';
console.log(oBox.style.width);//300px

1.3.2、行外样式

获取元素样式表中的样式。兼容性写法

<style type="text/css">
  #box{
      width: 100px;
      height: 100px;
      background-color:blueviolet;
  }
</style>
<body>
    <div id="box"></div>
</body>


<script type="text/javascript">
window.onload = function(){
 // getComputedStyle在支持的浏览器里是一个函数，在不支持的浏览器是undefined
 console.log(typeof window.getComputedStyle === 'function');
 var box =document.getElementById("box");
 if (typeof window.getComputedStyle === 'function'){
     console.log(getComputedStyle(box).backgroundColor);
     //rgb(138, 43, 226)
     console.log(getComputedStyle(box).width);//100px
     console.log(getComputedStyle(box).height);//100px
 }else{
     console.log(box.currentStyle.backgroundColor);//blueviolet
     console.log(box.currentStyle.width);//100px
     console.log(box.currentStyle.height);//100px
 }
}
</script>

封装：

/**
* @param obj 元素
* @param attr 样式名
* @returns {*} 返回带单位样式值
*/
function getStyle(obj, attr) {
   if (typeof(getComputedStyle) === 'function') {
       // 标准浏览器（IE9及以上）
       return getComputedStyle(obj)[attr];
   } else {// IE8及以下
       return obj.currentStyle[attr];
   }
}

1.4元素类（class）操作

动态的添加或者修改删除元素的类选择器，会让元素的样式动态的变化。这样静态页面的元素就会有动态的效果了。

1.4.1、获取类

获取：元素.className

1.4.2、设置类

设置：
1、元素.className = ‘className’;
2、元素.classList.add(“类名1”,“类名2”,…)

1.4.3、删除类

删除：
元素.className = ‘’;
元素.classList.remove(“类名1”,“类名2”,…)
例如：

<style type="text/css">
  .abc {width: 200px;height: 200px;background: brown;}
  .color1 {color: #fff;}
  .f30 {font-size: 30px;}
</style>

<div id="box">我就是我</div>
<script type="text/javascript">
    var oBox = document.getElementById('box');
    oBox.onclick = function() {
        oBox.className = 'abc color1 f30';
        //或者
        this.classList.add("abc")
        this.classList.add("color1")
        this.classList.add("f30")
    }
</script>

1.4.4、类名是否存在

设置：
1、元素.classList.contain(“类名”)

   var result = element.className.contain(class)//true Or false

1.4.5、切换类名

设置：
1、元素.classList.toggle(“类名”)

   element.className.toggle("类名1","类名2",···)

1.5、图片src操作

（1）获取图片src值：图片.src 一般不用
（2）设置图片src值：图片.src = 地址

   oImg.src = 'img/2.jpg';
小哥家的小费
关注
专栏目录
JS原生操作DOM（更新中）
Nana_9457的博客
12-21 560
在React项目中有时需要原生的JS操作DOM（项目没有引用jquery库），这里持续更新一些方法： 一、父子节点中插入中间层（div等） 最近在做一个需求，一个后端返回的html代码中给图片加“查看原图”按钮，由于需要基于父元素定位，所以要用div将原有的img包起来，并且在img后加入input标签，需要用到插入中间层的功能。 思路：通过img获取到父元素，在父元素中添加新的div子元素，然后...
原生JS操作DOM的方法
weixin_47735939的博客
01-19 1318
前言 现在框架应用比较广泛，封装了DOM操作操作，但是DOM是前端‘攻城狮’的基础，必备的知识，只会VUE不懂得DOM操作前端‘攻城狮’，不会太长久 DOM JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点 整个文档是一个文档节点 每个标签是一个元素节点 包含在元素中的文本是文本节点 元素上的属性是属性节点 文档中的注释是注释节点 DOM树结构 DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把htm
js 原生dom 操作
SK_study的博客
03-26 3413
js 原生操作dom的方法
原生JS操作DOM的一些常用方法集合【转】
weixin_30460489的博客
06-24 185
一直用JQuery，今天忽然想不用JQuery实现一些功能，在这个过程中，发现自己对原生的JS很不熟悉，找了点资料，在此做个记录吧！ JS-DOM Element方法和属性 S-DOM Element方法和属性一,获取html元素1.getElementByID(id)通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法.example:<div id="divid"&gt...
原生js 之 (DOM操作）
m0_49515138的博客
11-23 2175
Element.classList.add (“类名”) // 添加类名操作 可添加多个 不会覆盖原有的类名。Element.classList.remove( “ 移除类名”) // 移除类名操作 可移除多个类名。Element.classList.toggle( “切换类名 ”) //切换类名 无则添加，有则移除。(false为捕获阶段，true为冒泡阶段)但是有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
Javascript原生的DOM操作方法
依古比古的博客
06-03 580
Javascript的DOM操作方法 原生js5中操作dom一共是有三种方法： 第一种：标签式的绑定（HTML事件处理） 第二种：DOM0级事件处理 第三种:DOM2级事件处理 但是频繁的操作dom可能造成页面元素的重绘和重流。所以现在我们经常用的就是虚拟dom，数据驱动组件化。 但是跟随时代发展潮流的同时，我们也不能忘记了原生！！！ 补充一个面试题 vue 和jQuery最大的区别： jQuery：是一个操作DOM的神奇， 我们可以通过$(),ajax $().get等 vue呢 是数据驱动组
原生js操作dom实现上下左右移动.docx
11-23
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先，我们需要了解什么是DOM，以及如何使用JavaScript来操作DOM。 DOM（Document Object Model，文档对象...
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
这时，我们可以利用原生JavaScript实现DOM加载完成即刻执行的JS代码，避免不必要的延迟。 `jQuery`提供了`$(document).ready()`方法，它在DOM准备就绪时执行，但为了不依赖整个jQuery库，我们可以模仿其工作原理来...
js原生DOM操作
zyy446688的博客
12-05 1111
js原生DOM操作
原生JS实现几个常用DOM操作API实例
12-29
原生实现jQuery的sibling方法 <body> 我是span标签 我是一个div 我是标题 我是一个段落 [removed] //获取元素的兄弟节点 function siblings(o){//参数o就是想取谁的兄弟节点，就把那个元素传进去 var a = [];...
原生js操作dom
True_cl的博客
01-04 264
js一共分为三个部分，分别是ECMAScript，DOM ， BOM。 一，常用的DOM的API 分别有通过id获取标签,通过class获取标签,通过name获取标签,通过标签名获取标签,一般来说都是通过标签名来获取标签 代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
JS原生DOM笔记
mof_geng的博客
12-17 570
获取页面元素方式 document.getElementById("btn"); document.getElementsByClassName("类样式的名字"); document.getElementsByName("name属性的值"); var div = document.getElementsByTagName("img"); document.querySelector(); ele
原生 JS DOM 常用操作大全
最新发布
FGGIT的博客
11-08 276
原生 JS DOM 常用操作大全
使用原生 JavaScript 操作 DOM
weixin_34082695的博客
04-06 100
微软官方放弃了 IE10-，所以现在可以放心使用原生 JavaScript 操作 DOM 了。 文章针对如下几个点进行介绍： 查询修改 DOM。 修改类和特性。 事件监听 动画 一、查询 DOM 1.1 .querySelector() 使用 CSS 选择器获取元素（一个），是网页中符合查询条件的元素快照，不是即时的。 const myElement = document.querySele...
原生JS操作DOM的方法？
weixin_46409887的博客
06-26 1731
JS操作DOM 1,DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。 1)元素节点：构成了DOM的基础。文档结构中，是根元素，代表整个文档， 其他的还有,,,等等。元素节点之间可以相互包含(当然遵循一定的规则) 2)文本节点：包含在元素节点中。 3)属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的 2,js中获取dom元素的方式有哪些？ //通过ID var li = document.getElementById(“first”); //通过
原生js dom操作
yuling__ting的博客
05-24 1743
这里说说一些原生js操作dom的方法： 1，元素的获取       getElementById()，getElementsByTagName()，getElementsByClassName()，这里要注意这个getElementsByClassName()在ie8以下是不兼容的。 2，元素操作方法       (1)node.appendChild(node1：向某个节点添加一个子节点
原生JS操作DOM方法
ALIN的博客
04-12 192
dom.parentNode; //得到父节点 dom.nextSibling; //获得下一个兄弟节点 dom.previousSibling; //得到上一个兄弟节点 dom.firstChild; //获得第一个子节点 dom.lastChild; //获得最后一个子节点 dom.parentNode; //获得父节点 dom.nextSibling; //获得下一个兄弟节点 dom.previousSibling; //得到上一个兄弟节点 dom.firstChi.
js 原生DOM操作
pyp_demon的博客
12-23 314
目录document.getElementsByTagName() 返回带有指定标签名的对象的集合 document.getElementsByTagName() 返回带有指定标签名的对象的集合 document.getElementsByTagName(标签名) 方法1：返回带有指定标签名的对象的集合 方法2：当传入的值是个 * 号的时候，则获取全部的标签对象 <!DOCTYPE html> <html> <head> <script src
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值