DOM读取和修改节点对象属性
一、获取和修改元素间的内容(3种)
1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文
固定套路：1.删除父元素下所有子元素：parent.innerHTML="";
2.批量替换父元素下所有子元素：parent.innerHTML="所有子元素标签组成的html"
2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签)
textContent 是DOM标准；innerText 是IE8；
3.文本节点内容
nodeValue
示例：读取并修改元素内容
<!DOCTYPE HTML>
<html>
<head>
<title>读取并修改元素的内容</title>
<meta charset="utf-8" />
<style>
select{width:100px;height:85px;}
div{display:inline-block;width:50px}
</style>
<script src="js/2_2.js"></script>
</head>
<body>
<!--假设两个select元素，分别保存备选地区列表和选中地区列表
实现两选择框之间选项的交换：
包括：当个选中项左右移动
多个选中项左右移动
全左移和全右移
要求：两个select中的地区都要按照名称首字母排序
-->
<select id="unsel" size="5" multiple>
<option>Argentina</option>
<option>Brazil</option>
<option>Canada</option>
<option>Chile</option>
<option>China</option>
<option>Cuba</option>
<option>Denmark</option>
<option>Egypt</option>
<option>France</option>
<option>Greece</option>
<option>Spain</option>
</select>
<div>
<button onclick="move(this)">>></button>
<button onclick="move(this)">></button>
<button onclick="move(this)"><</button>
<button onclick="move(this)"><<</button>
</div>
<select id="sel" size="5" multiple>
</select>
</body>
</html>
//定义两个数组：
// unsel:存所有未选中的国家(左边的)
// sel:存所有选中的国家(右边)
var unsel=null;
var sel=null; //封装$
window.$=function(selector){
return document.querySelectorAll(selector);
}
//当页面加载后
window.onload=function(){
/*初始化unsel "</option>"*/
unsel=$("#unsel")[0].innerHTML.trim().slice(8,-9).split(/<\/option>\s*<option>/);
//console.log(unsel);
sel=[]; }
/**/
function move(btn){
//如果btn的内容是>>
if (btn.innerHTML==">>") //btn.textContent==">>" textContent会对字符进行转义
{
//将unsel中的所有元素，拼入sel，对新数组排序
sel=sel.concat(unsel);
sel.sort();
unsel=[];
//console.log(sel);
}else if (btn.innerHTML=="<<")
{//如果btn的内容是<<
unsel=unsel.concat(sel);
unsel.sort();
sel=[];
//console.log(unsel);
}else if (btn.innerHTML==">")
{//如果btn的内容是>
var opts=$("#unsel option");
//option对象的selected属性==>true/false
//获得unsel下的所有option对象
console.log(opts.length);
//遍历所有的option
for (var i=opts.length-1; i>=0; i--)
{
//只要当前option的selected有效
if (opts[i].selected)
{
//使用splice删除unsel中的相同位置的元素，将删除的元素压入sel中
sel.push(unsel.splice(i,1)[0]);
//如果在遍历过程中会影响到下标，建议从后向前遍历
}
}
//遍历结束，对sel进行排序
sel.sort(); }else if (btn.innerHTML=="<")
{//如果btn的内容是<
var opts=$("#sel option");
//console.log(opts.length);
for(var i=opts.length-1; i>=0; i--){
if(opts[i].selected){
unsel.push(sel.splice(i,1)[0]);
}
}
unsel.sort();
}
//更新界面
updateSel();
}
function updateSel(){
//专门跟新两个select元素的内容
//
$("#unsel")[0].innerHTML="<option>"+unsel.join("</option><option>")+"</option>";
$("#sel")[0].innerHTML="<option>"+sel.join("</option><option>")+"</option>";
}
二、获取、添加、删除、修改元素属性
getAttribute("属性名") 获取元素对象指定特性的值
setAttribute(name, value) 设置元素对象指定特性的值
removeAttribute('属性名') 删除元素对象上的指定特性
hasAttribute('属性名') 判断元素对象是否包含指定特性
attributes() 获取元素对象指定特性的集合
1.读取属性(4种)
element.attributes[下标].value
var value=element.attributes['属性名']
element.getAttributeNode('属性名').value
var value=element.getAttribute("属性名")
2.修改属性(2种)
element.setAttribute(name, value);//IE8不支持 只能：element.attributes['属性名']=value
element.setAttributeNode(attrNode);//属性可以是属性节点
3.移除属性(2种)
element.removeAttribute('属性名');
element.removeAttributeNode(attrNode);
4.判断元素是否包含属性(2种)
element.hasAttribute('属性名') //true或false
element.hasAttributes( );
5.Property(属性) vs Attribute(HTML特性)
Property: 对象在内存中存储的属性 可以用 . 访问
Attribute: 元素对象在开始标签中定义的HTML属性和自定义属性
访问HTML标准属性时，二者完全一致。如果访问自定义属性时，只能用Attribute。
示例：修改元素属性 模拟摇号排序
<!DOCTYPE HTML>
<html>
<head>
<title>修改元素的属性</title>
<meta charset="utf-8" />
<script src="js/3_1.js"></script>
</head>
<body>
<!--1. 使用自定义属性实现摇号排名-->
<ul>
<li>Eric</li>
<li>Scott</li>
<li>Jerry</li>
<li>Tom</li>
<li>Rose</li>
<li>John</li>
<li>Smith</li>
<li>Andy</li>
</ul>
</body>
</html>
window.onload=function(){
//获得ul下所有li
var lis=document.querySelectorAll("ul li");
var nums=[];
//反复生成随机数，nums.length<lis.length
// 在1到lis.length之间取1个随机正数n
// 利用nums的indexOf方法，查找是否包含n
// 如果不包含，将n压入nums中
while (nums.length<lis.length)
{
var n=parseInt(Math.random()*(lis.length-1+1)+1);
if(nums.indexOf(n)==-1){
nums.push(n);
}
}
console.log(nums);
//将nums中的数字，保存到每个li的data-i自定义属性中
//遍历nums
// 将nums中当前的数字，设置到相同位置的li中的data-i特性上
for (var i=0; i<nums.length; i++)
{
lis[i].setAttribute("data-i",nums[i]);803490
}
//将类数组最想转化为标准数组对象
lis=Array.prototype.slice.call(lis);
//尽让li的data-i特性相减
lis.sort(function(a,b){
return a.getAttribute("data-i")-b.getAttribute("data-i");
//return a.dataset.i-b.dataset.i;//HTML5中读取自定义属性; "data-xxx"-->dataset的集合中，属性名xxx
});
//清空所有旧li
ul=document.querySelector("ul");
ul.innerHTML="";
for (var i=0; i<lis.length; i++)
{
//将li追加到ul中
ul.appendChild(lis[i]);
}
console.log(lis);
}
三、获取和修改元素的样式
1.获取或修改内联样式：style对象
设置：style.属性名="值";
移出(2种)：
style.属性名="";
style.removeProperty("CSS属性名")
//仅能操作style属性中定义的内联样式,无法获取或设置样式表中的样式
2.获取或修改内联样式表中的属性(3步)
1. 获得要修改的样式表对象：
var sheet=document.styleSheets[i];//styleSheets:获得当前网页的所有样式表对象
2. 获得要修改的cssRule：
cssRule：样式表中一个大括号就是一个cssRule对象
var cssRule=sheet.cssRules[i];//cssRule可能嵌套。
3. 获得cssRule中的属性
cssRule.style.属性名
DOM读取和修改节点对象属性的更多相关文章
- C#通过DSOFile读取与修改文件的属性
搜了一圈用C#读取与修改文件属性的文章,结果几乎找不到- -: 偶然间看到一个DSOFile工具,然后找到了对该工具进行详细讲解的一篇文章:<DSOfile,一个修改windows系统文件摘要的 ...
- 关于Javascript中通过实例对象修改原型对象属性值的问题
Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的 ...
- C#操作XML方法：新增、修改和删除节点与属性
一 前言 先来了解下操作XML所涉及到的几个类及之间的关系 如果大家发现少写了一些常用的方法,麻烦在评论中指出,我一定会补上的!谢谢大家 * 1 XMLElement 主要是针对节点的一些属性进行操 ...
- JavaScript--DOM修改元素的属性
一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
- 使用DOM解析XML文件，、读取xml文件、保存xml、增加节点、修改节点属性、删除节点
使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...
- DOM简介及节点、属性、查找节点的方法
DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式 ...
- DOM操作节点对象集合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
随机推荐
- 15 GIL 全局解释器锁 C语言解决 top ps
1.GIL 全局解释器锁:保证同一时刻只有一个线程在运行. 什么是全局解释器锁GIL(Global Interpreter Lock) Python代码的执行由Python 虚拟机(也叫解释器主循环, ...
- java Vector向量
9.3.4 Vector向量 [专业IT培训机构,真正零首付入学www.bjsxt.com] Vector底层是用数组实现的List,相关的方法都加了同步检查,因此“线程安全,效率低”. 比如,ind ...
- Android ImageSwitcher 配合Picasso解决内存溢出（OOM）问题
最近项目中用到了 ImageSwitcher 来实现图片切换,使用起来很简单,但发现当图片比较大(超过了3M)时,程序出现了内存溢出(OOM)问题而崩溃了. 原因就是图片太大了,显示到 ImageVi ...
- javac一次性编译多个包下的.java文件
如题是我想要知道的,然后在网上搜了一下 下面是在某些帖子里看到别人说的只言片语 =========================================================== ...
- Python 常见的错误类型和继承关系
Python所有的错误都是从BaseException类派生 BaseException +-- SystemExit +-- KeyboardInterrupt +-- GeneratorExit ...
- linux学习总结---web前端③
css3: border-radius opacity: transform: 旋转 rotate 平移translate 缩放scale 扭曲skew transition:转变 强调:开始和结束 ...
- 关于缺失值（missing value）的处理---机器学习 Imputer
关于缺失值(missing value)的处理 在sklearn的preprocessing包中包含了对数据集中缺失值的处理,主要是应用Imputer类进行处理. 首先需要说明的是,numpy的数组中 ...
- LeetCode 622——设计循环队列
1. 题目 设计你的循环队列实现. 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环.它也被称为"环形缓冲器". 循环队列 ...
- Java基础——IO
一.概述 I/O,Input/Output输入输出.输入机制比如读取文件数据.用户键盘输入等,输出,比如将数据输出到磁盘等. Java的IO是以流(Stream)为基础的. 流的叫法十分形象,你可以想 ...
- js 给某个div增加class 样式（三种方式）
第一种: el.setAttribute('class','abc'); <!DOCTYPE HTML> <HTML> <HEAD> <meta c ...