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("标 ...
随机推荐
- MediaTypeListWidget->insertItem 添加的label没有填充单元格
label没有填充满当前的item,但是主界面拉伸或者大小变化之后会填充当前的item 类似相关的问题我猜测都是因为子控件或者需要参考的控件的参考对象的大小在初始化的时候还没有完成最终的初始化,导致大 ...
- jdk带的一些工具，强悍
这些工具有的已经接触到了,功能很强悍,但是使用也有点复杂(参数) 在代码中使用System.setProperty()或者在启动程序时使用-D选项设置代理服务器地址和端口 看看别人的研究: JDK自带 ...
- 玩转Node.js（四）-搭建简单的聊天室
玩转Node.js(四)-搭建简单的聊天室 Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个东东,说是可以用它来简单的实现实时双向的基于事件的通讯机制.我便看了一 ...
- 「暑期训练」「Brute Force」 Restoring Painting （CFR353D2B）
题意 给定一定条件,问符合的矩阵有几种. 分析 见了鬼了,这破题谁加的brute force的标签,素质极差.因为范围是1e5,那你平方(枚举算法)的复杂度必然爆. 然后你就会思考其中奥妙无穷的数学规 ...
- Ubuntu下使用Git_5
还欠大家最后一篇Git的学习. Git的下一个内容,标签,标签是为了更方便的参考提交而给他表上通俗易懂的名称 Git可以使用两种标签,轻标签和注解标签,打上的标签是固定的,不能向分支那样可以移动位置, ...
- eclipse返回快捷键
1.图上第一个箭头(Ctrl + Q) 返回上一个编辑点(编辑,修改代码) 2.图上第二个箭头(Alt + Left) 返回上一个操作点(点击进入方法等操作) 3.图上第三个箭头(Alt + Righ ...
- 1087 All Roads Lead to Rome （30 分）(最短路径)
直接用Dijkstra做 #include<bits/stdc++.h> using namespace std; int n,m; map<string,int>si; ma ...
- struts2 action中获取request session application的方法
共四种方式: 其中前两种得到的是Map<String,Object> 后两种得到的才是真正的request对象 而Map就是把request对象中的属性取出做成了键值对而已. [方法一] ...
- Daily Scrum02 12.03
Daily Scrum03 12.03 一天过去了,新的一天即将到来,我们组仍旧干劲十足呢~ Member Today's Task Tomorrow's Task 李孟 孟神有点累了呢 task85 ...
- 【SSH】——hql的使用方式及实现原理
[含义] hql,即Hibernate Query Language.它与我们熟知的sql很类似,它最大的特点就是对查询进行了面向对象的封装,下面会在具体例子中说明. sql查询的是数据库中的表或字 ...