原生js操作dom备忘
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title></title>
</head>
<body lang="en-us">
<p><span class="className">1</span><i>2</i></p>
<div></div>
</body>
<script> /*-----------------------------------属性-----------------------------------*/ //childNodes -当前节点的全部子级节点（有的浏览器里会把元素里的空白节点转换成文本节点 nodeType==3）
var nodes=document.getElementsByTagName('p')[0].childNodes;
for(var i=0;i<nodes.length;i++){
/*
* <span>1</span>
* <i>2</i>
* */
console.info(nodes[i]);
} var childNodes=document.getElementsByTagName('p')[0];
//firstChild -childNodes里的第一个节点 相当于childNodes[0] *所有主流浏览器都支持 firstChild 属性。
//lastChild -childNodes里的最后一个节点 相当于childNodes[childNodes.length-1]
/*
* <span>1</span>
* <i>2</i>
* */
console.info(childNodes.firstChild);
console.info(childNodes.lastChild); //parentNode -父节点 如果指定节点没有父节点，则返回 null。
/*
*<p></p>
* */
console.info(childNodes.lastChild.parentNode); //nextSibling previousSibling -兄弟节点 如果没有 nextSibling previousSibling节点，则返回值为 null
/*
*<span>1</span>
*<i>2</i>
* */
console.info(childNodes.lastChild.previousSibling);
console.info(childNodes.firstChild.nextSibling); //nodeValue -返回元素节点里的值 注意：文本始终位于文本节点中
/*
*1
* */
console.info(childNodes.firstChild.childNodes[0].nodeValue); //nodeName -返回元素节点名称时，并不包含html里的<>符号
/*
* #text
* SPAN
* */
console.info(childNodes.firstChild.childNodes[0].nodeName);
console.info(childNodes.firstChild.nodeName); //tagName -返回元素的标签名
/*
*undefined
* SPAN
* */
console.info(childNodes.firstChild.childNodes[0].tagName);
console.info(childNodes.firstChild.tagName); //className -属性设置或返回元素的 class 属性
/*
*className
* */
console.info(childNodes.firstChild.className); // id -设置或返回元素的 id
childNodes.firstChild.id='hello';
console.info(childNodes.firstChild.id); //innerHTML -设置或返回元素的 inner HTML //lang -设置或返回元素的语言代码
console.info(document.getElementsByTagName('body')[0].lang); //title -设置或返回元素的标题 //textContent -返回所有子及后代节点的文本
console.info(document.getElementsByTagName('body')[0].textContent); //ownerDocument -以 Document 对象的形式返回节点的 owner document
console.info(document.getElementsByTagName('body')[0].ownerDocument); /*-----------------------------------方法-----------------------------------*/ //appendChild() -向节点添加最后一个子节点 也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素
var p=document.getElementsByTagName('p')[0];
var textNode=document.createTextNode('world!');
var newElementNode=document.createElement('b');
newElementNode.appendChild(textNode);//添加元素
p.appendChild(newElementNode);//添加元素
var div=document.getElementsByTagName('div')[0];
div.appendChild(p);//移动元素 //cloneNode -克隆元素 创建节点的拷贝，并返回该副本
var cloneNode=div.cloneNode(true);//克隆所有后代,参数设置为true
document.getElementsByTagName('body')[0].appendChild(cloneNode); //insertBefore -在指定的已有子节点之前插入新的子节点
var listNode=document.createElement('ul');
var liNode=document.createElement('li');
listNode.appendChild(liNode);
var body=document.getElementsByTagName('body')[0];
body.appendChild(listNode);
var textNode=document.createTextNode('haha!');
body.insertBefore(textNode,listNode); //removeChild -从元素中移除子节点 返回值是对删除节点的引用
/*
* "haha"
* */
var delNode=textNode.parentNode.removeChild(textNode);
console.info(delNode); //replaceChild -用新节点替换某个子节点
var newNode=document.createTextNode('hehe!');
var oldNode=document.getElementsByTagName('p')[0].childNodes[0];
oldNode.parentNode.replaceChild(newNode,oldNode); //setAttribute getAttribute -设置和返回指定属性名的属性值
var div2=document.getElementsByTagName('div')[0];
div2.setAttribute('data-id','71121');
console.info(div2.getAttribute('data-id'));//71121 //normalize -移除空的文本节点，并连接相邻的文本节点
function addTextNode(){
var text=document.createTextNode('文本节点内容');
div2.appendChild(text);
}
addTextNode();
addTextNode();
console.info(div2.childNodes.length);
div2.normalize();
console.info(div2.childNodes.length);
原生js操作dom备忘的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
- 原生js操作Dom命令总结
常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.getElementsByTagName(“div”);根据标签名获取页面 ...
- js 操作COOKE备忘
function getCookie(c_name) { if (document.cookie.length > 0) { c_start = document.cookie.indexOf( ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
随机推荐
- 关于C#循环图片GDI+内存不足异常的记录
循环大量图片的时候会报出GDI+内存不足的问题,这个问题困扰了我很久,下面是我的几个解决方案: 使用using(){}代码块来定义需要释放内存的变量.using代码块会在代码结束的时候释放变量,但是并 ...
- JSP中动态include和静态include的区别（简版）
动态的include: 用法:<jsp:include page="1.jsp" flush="true" /> 特点:行为元素,可以带参数:先编译 ...
- 消息摘要算法-MAC算法系列
一.简述 mac(Message Authentication Code,消息认证码算法)是含有密钥散列函数算法,兼容了MD和SHA算法的特性,并在此基础上加上了密钥.因此MAC算法也经常被称作HMA ...
- Flex air修改外部xml文件 (转)
AIR的文件操作不难,看完教程应该可以满足你对文件的所有基本操作.这篇教程主要以实际操作中遇到的情况来讲解 我们想想文件操作都会有什么内容,无非是创建,修改,删除,移动,拷贝.在这个过程中我们会涉及到 ...
- AJAX跨域解决方案
从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在,这似乎是一个很经典的问题了,是由于javascript的同源策略所导致. 解决的办法,大概有如下几种: 1. 使用中 ...
- Nginx常用日志分割方法
方式一: nginx cronolog日志分割配置文档,根据下面方法,每分钟分割一次NGINX访问日志. 1.nginx日志配置 access_log /var/log/nginx/access.lo ...
- Python实现支持并发、断点续传的FTP
参考网上一个FTP程序,重写了一遍,并稍加扩展 一.要求 1. 支持多用户同时登录 2. 可以注册用户,密码使用md5加密 3. 可以登录已注册用户 4. 支持cd切换目录,ls查看目录子文件 5. ...
- css中 input的button默认原始的样子
以往我们写css时,让一行文字垂直居中. 会设置line-height等于height比如: 当我把这个原理 放在button上时 会是这个样子的. 以下都是火狐浏览器环境 有没有发现一个现象,他们 ...
- opencv从txt文本读取像素点并显示
opencv从txt文本读取像素点并显示 文本储存格式为每行一个像素点,排列为RGB.每帧图像的帧头为65535. 如下图所示 废话不多说,代码如下: // #include <iostrea ...
- Java实现购物车功能：方式一：存放在session中.方式二:存储在数据库中
//将购物车产品加入到cookie中,方式同浏览记录.Java实现购物车,方式一(简易版):存储在session中.这种方式实现还不严谨,大家看的时候看思路即可.(1). JSP页面中,选择某一款产品 ...