首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

原生 JS DOM 常用操作大全

DOM DOM文档对象模型 又称为DOMDOM树 由文档、元素、节点 组成 文档:一个页面就是一个文档,元素:文档中的所有标签都称为元素。...(false为捕获阶段,true为冒泡阶段) 注意:addEventListener() 方法 不支持低版本的IE 注册事件的三种方法 删除事件(解绑事件) 移除传统的注册方式(DOM 对象的方法...type 、value 、checked 、selected 、disabled 获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名=值 按钮 样式属性操作 通过 js...node.removeChild( child ) 方法 在父级节点删除一个子节点,返回删除的节点 复制(克隆)节点 node.cloneNode() //返回调用 该方法的节点的一个副本,也称为克隆节点...主要有创建,添加,删除,改,查。

10210
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【CSS】398- 原生JS实现DOM爆炸效果

    分享内容介绍 通过原生js代码,实现粒子爆炸效果组件 组件开发过程中,使用到了公司内部十分高效的工程化环境,特此打个广告:新浪移动诚招各种技术大大!可以私聊投简历哦! 效果预览 ?...,且自定义功能难设计,屏幕适配也有一定成本` jsdom创建,生成随机css @keyframes `可行,但是创建style样式表,引发css重新渲染页面,会导致页面的性能下降,且抛物线css的复杂度不低...,暂不作为首选` js 刷帧 做dom渲染 `可行,但是刷帧操作会造成性能压力` 结论 canvas虽说可行,但由于其开发弊端 本次分享不以canvas为分享内容,而是使用最后一种 js刷帧的dom操作...* 使用构造函数new Partical( )粒子 * 粒子实力对象存在 animate 执行动画方法 * 有动画结束回调函数的存储和执行 * 设置粒子的父元素: renderIn 方法 * 父元素删除粒子...* insertChild可以向粒子内渲染使用者自定义的dom * renderIn 可以设置粒子父元素 * deleteEl 可以从父元素删除粒子 * animate 可以执行刷帧,渲染计算位置,触发回调

    3.4K70

    JS-DOM 综合练习-动态添加删除班级成绩表

    DOCTYPE html> dom对象综合练习 <style type="text/...-4:这样<em>删除</em>调用不了<em>删除</em>函数,那就利用添加input的道理,添加一个html中一样的a标签,然后a标签内有点击事件触发<em>删除</em>函数。...至今没有解决,2-1尝试解决失败) } // 【3】创建<em>删除</em>函数 //遇到的难点 //1.<em>删除</em>地方的a链接哪里不会接函数调用,打算写JavaScript:del();来着,但是w3c...被注销的代码都是在寻找需要<em>删除</em>的那个tr.正解如下面的3-1,3-2,3-3 //4,也找到爸爸了,也能<em>删除</em>了,可是新增加的tr行不能实现<em>删除</em>函数的调用可咋办?...="javascript:;" onclick="deleteRow(this)">删除 <!

    3.7K80

    jsDOM理解

    arguments.callee,func.caller,变量赋值前必须声 明,局部this必须被赋值 (Person.call(null/undefined) 赋值什么就是什么),拒绝重复属性和参数 复制代码 DOM...什么是DOM 1.DOM — > Document Object Model 2.DOM定义了表示和修改文档所需的方法。...DOM对象即为宿主对象, 由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。 也有人称DOM是对HTML以及XML的标准编程接口。...复制代码 DOM基本操作 1.对节点的增删改查 查看元素节点 document代表整个文档 document.getElementById() //元素id 在Ie8以下的浏览器, 不区分id大小写,而且也返回匹配...querySelector() // css选择器 在ie7和ie7以下的版本中没有,非实时 .querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有,非实时 复制代码 DOM

    4.2K30

    JS DOM学习笔记

    button";//input标签类型为按钮 btn.value = "提交"; //设置按钮值 document.appendChild(btn); //将按钮添加到文档中 13、不同浏览器中对DOM...支持的方法不一样 获取网页中那个元素触发了事件,在IE中使用srcElement; 在FireFox里使用target 使用Dom获取和更改网页标签元素内文本,在IE中使用innerText; 在FireFox...textContent 动态为网页或元素绑定事件,在IE中绑定事件的方法是attachEvent; 在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器上Dom...的不同 14、jQuery的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在...Dom元素创建完毕后被触发,这样可以提高网页的响应速度 15、js打印一个对象的所有属性: //传入一个对象 function (swiper){ var msg = "";

    4K40

    DOM 节点的克隆与删除

    无奈的开头         关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了。...但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情况更多,这里不详细讲解,只说明大概过程。        ...解决方案另辟蹊径,即可以通过获取副本的HTML字符串,重新构造一个DOM节点,这样根据字符串反系列化的副本就不会包含在js中额外操作的属性或者事件处理程序。         ...删除节点理应没有什么问题,但是legacy IE下仅仅使用removeNode会出现内存泄露问题,被删除的节点有部分内存并不会被回收,如果长时间运行该程序,则可能会出现内存耗尽的危险,只有关闭页面才可能回收这些内存...但是可以利用outerHTML属性做文章,他可以更有效的删除占用的内存,但是需要注意的是这种方法仍然不会完全释放占用的内存,但是总体回收的内存大于removeNode方法。

    2K70

    js书写原生ajax,JS 原生ajax写法

    原生ajax 原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe...… JS原生ajax与Jquery插件ajax深入学习 序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来...jquery插件ajax方法,于是就行了一些总结,因 … js原生Ajax的封装与使用 一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR...,使用了js原生ajax 主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 2 [代码]JS原生Ajax...,GET和POST javascript/js的ajax的GET请求: Jquery学习笔记(10)–ajax删除用户,使用了js原生ajax 主要复习了php的pdo数据库操作,和js

    15.3K40
    领券