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("标 ...
随机推荐
- Java RMI 入门指南
开通博客也有好些天了,一直没有时间静下心来写博文,今天我就把两年前整理的一篇关于JAVA RMI入门级文章贴出来,供有这方面需要的同学们参考学习. RMI 相关知识 RMI全称是Remote Meth ...
- windows 10 下的linux子系统用法 -- tmux分屏工具用法
1 激活linux子系统的方法见百度: 2 打开powershell,输入bash启动子系统终端:输入exit退出: 3 输入tmux attach连接会话:ctrl-b+d 返回终端:ctrl-b+ ...
- Eclipse+APKTool动态调试APK
1. 所需工具 Eclipse. Apktool v2.0.6. 安卓SDK工具. 2. 重编译APK apktool d -d -o test test.apk 此时当前test目录下就是apkto ...
- JMeter-取样器
JMeter取样器: 1.右键点击新建的线程组,选择Add---->Sampler---->HTTP Request:(如图) 2.新建取样器之后的界面如图: 3.根据上图中的数字标识解释 ...
- 第六篇 常用请求协议之post put patch 总结
[转]https://blog.csdn.net/sshfl_csdn 感谢愿意总结分享的人,thanks idempotent 幂等的 如果一个方法重复执行多次,产生的效果是一样的,那就是i ...
- 【Swift】日期比较函数 记录下 Comparing date in Swift
Add this code to your project and comparing dates is easier than ever 扩展NSDATE //swift 3.0.2 extensi ...
- Tensorflow多线程输入数据处理框架
Tensorflow提供了一系列的对图像进行预处理的方法,但是复杂的预处理过程会减慢整个训练过程,所以,为了避免图像的预处理成为训练神经网络效率的瓶颈,Tensorflow提供了多线程处理输入数据的框 ...
- debian8.2安装kubernetes
master上通过kubeadm安装Kubernetes 添加国内阿里源后安装kubeadm: deb https://mirrors.aliyun.com/kubernetes/apt/ kuber ...
- AMF3 在Unity中使用AMF3和Java服务器通信
现在在做的项目是一个网页游戏的移植到移动端. 所以服务器直接使用原来的代码.原来的游戏是as3实现,使用flash amf3数据通信. Unity 使用C#作为脚本语言,所以就需要.net的amf3解 ...
- Daily Scrum 11.01
全队进展速度很快,11月伊始都完成了初步的工作.交由负责整合工作的毛宇开始调试整合. Member Today's task Tomorrow's task 李孟 task 616 测试 (活动) ...