【前端笔试】原始JS对DOM对象的操作:增删改查插
2017-09-21 00:08
399 查看
看书、看控制台、看文档一点点总结的~有疏忽的地方,请不吝赐教~
创建text节点 :document.createTextNodet(“内容”);
复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。
node.parentElement.removeChild(node);
replaceChild();//删除一个子节点,并用一个新的节点取代它。第一个参数是新节点,第二个参数是要删除的节点。
node.parentElement.replaceChild(newNode,node);
对属性的修改
属性分为标准HTML属性和非标准的HTML属性。
* HTML属性作为Element的属性
HTML Element 定义了通用的HTTP属性,像id、标题lang和dir的属性,以及事件的处理程序属性(onclick)。特定的element子类型还有特定的属性,如img的src属性。
获取和设置非标准的HTML属性
Element定义了getAttribute和setAttribute方法来查询和设置非标准属性,hasAttribute和removeAttribute来检测命名属性是否存在和完全删除属性。
对内容的修改
innerHTML:包含标签的内容
innerText(火狐支持不好):纯文本的元素内容
textContent(IE不支持):纯文本的元素内容
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document. getElementsByClassName() 返回文档中所有指定类名的元素集合。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
查找父子兄弟
对于一个Node节点,包含很多种,像:Document节点、Text节点、Comment节点、Element节点,我们常常需要获得的是元素节点,忽略掉Text和Comment节点:
firstElementChild,lastElementChild;
children => 数组类型:children[0] ,第一个子节点
nextElementSibling,previousElementSibling => 兄弟节点
parentElement => 父亲节点
parent.appendChild(child); // 插入到最后
parent.insertBefore(newNode,node);//插入到node之前
1. 增
创建元素节点 :document.createElement(“div”);创建text节点 :document.createTextNodet(“内容”);
复制一个节点: var newNode = node.cloneNode();//参数为true复制所有子节点,参数为false只执行一次浅复制。
2. 删
removeChild();//该方法不是在待删除的节点上调用,而是在它的父元素节点上调用。node.parentElement.removeChild(node);
replaceChild();//删除一个子节点,并用一个新的节点取代它。第一个参数是新节点,第二个参数是要删除的节点。
node.parentElement.replaceChild(newNode,node);
3. 改
许多时候需要对节点属性和内容进行修改。对属性的修改
属性分为标准HTML属性和非标准的HTML属性。
* HTML属性作为Element的属性
HTML Element 定义了通用的HTTP属性,像id、标题lang和dir的属性,以及事件的处理程序属性(onclick)。特定的element子类型还有特定的属性,如img的src属性。
var oImg = document.getElementById("img1"); oImg.id = "newID"; oImg.className = "className"; oImg.src = "...";
获取和设置非标准的HTML属性
Element定义了getAttribute和setAttribute方法来查询和设置非标准属性,hasAttribute和removeAttribute来检测命名属性是否存在和完全删除属性。
对内容的修改
innerHTML:包含标签的内容
innerText(火狐支持不好):纯文本的元素内容
textContent(IE不支持):纯文本的元素内容
4. 查
一步查找到位document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document. getElementsByClassName() 返回文档中所有指定类名的元素集合。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
查找父子兄弟
对于一个Node节点,包含很多种,像:Document节点、Text节点、Comment节点、Element节点,我们常常需要获得的是元素节点,忽略掉Text和Comment节点:
firstElementChild,lastElementChild;
children => 数组类型:children[0] ,第一个子节点
nextElementSibling,previousElementSibling => 兄弟节点
parentElement => 父亲节点
5. 插
Node有方法appendChild()和insertBefore()。parent.appendChild(child); // 插入到最后
parent.insertBefore(newNode,node);//插入到node之前
相关文章推荐
- 腾讯Web前端(Js)笔试面试之谈
- js直接通过id操作DOM对象是不规范的
- js的dom对象操作
- js对数组元素的操作-增删改查
- 前端笔试题 JS部分
- node.js操作mysql(增删改查)
- 从零开始前端学习[50]:js操作标签属性,读写属性标签
- JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)
- node.js操作mysql数据库之增删改查
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- JS数组操作之增删改查的简单实现
- JS操作dom对象的入门(比较系统全面)
- JS前端开发判断是否是手机端并跳转操作(小结)
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
- [前端] js操作svg
- JS实现数组的增删改查操作示例
- 纯自创新浪博客前端项目js和html自己写时操作步骤详细,用到的图片已上传,已90%但非完整项目
- web前端复习(二):js日期操作,实现时间显示和倒计时效果
- 前端之js字符串操作
- JS中的DOM对象及JS对document对像的操作