DOM读取和修改节点对象属性

一、获取和修改元素间的内容(3种)

  1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文

    固定套路:1.删除父元素下所有子元素:parent.innerHTML="";

         2.批量替换父元素下所有子元素:parent.innerHTML="所有子元素标签组成的html"

  2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签)

    textContent 是DOM标准;innerText 是IE8;

  3.文本节点内容

    nodeValue

  示例:读取并修改元素内容

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <title>读取并修改元素的内容</title>
 5 <meta charset="utf-8" />
 6 <style>
 7     select{width:100px;height:85px;}
 8     div{display:inline-block;width:50px}
 9 </style>
10 <script src="js/2_2.js"></script>
11 </head>
12 <body>
13     <!--假设两个select元素,分别保存备选地区列表和选中地区列表
14 实现两选择框之间选项的交换:
15     包括:当个选中项左右移动
16               多个选中项左右移动
17               全左移和全右移
18 要求:两个select中的地区都要按照名称首字母排序
19 -->
20     <select id="unsel" size="5" multiple>
21         <option>Argentina</option>
22         <option>Brazil</option>
23         <option>Canada</option>
24         <option>Chile</option>
25         <option>China</option>
26         <option>Cuba</option>
27         <option>Denmark</option>
28         <option>Egypt</option>
29         <option>France</option>
30         <option>Greece</option>
31         <option>Spain</option>
32     </select>
33     <div>
34 <button onclick="move(this)">&gt;&gt;</button>
35 <button onclick="move(this)">&gt;</button>
36 <button onclick="move(this)">&lt;</button>
37 <button onclick="move(this)">&lt;&lt;</button>
38     </div>
39     <select id="sel" size="5" multiple>
40     </select>
41 </body>
42 </html>

 1 //定义两个数组:
 2 //    unsel:存所有未选中的国家(左边的)
 3 //    sel:存所有选中的国家(右边)
 4 var unsel=null;
 5 var sel=null;
 6
 7 //封装$
 8 window.$=function(selector){
 9     return document.querySelectorAll(selector);
10 }
11  //当页面加载后
12 window.onload=function(){
13     /*初始化unsel  "</option>"*/
14     unsel=$("#unsel")[0].innerHTML.trim().slice(8,-9).split(/<\/option>\s*<option>/);
15     //console.log(unsel);
16     sel=[];
17
18 }
19 /**/
20 function move(btn){
21     //如果btn的内容是>>
22     if (btn.innerHTML=="&gt;&gt;") //btn.textContent==">>" textContent会对字符进行转义
23     {
24         //将unsel中的所有元素,拼入sel,对新数组排序
25         sel=sel.concat(unsel);
26         sel.sort();
27         unsel=[];
28         //console.log(sel);
29     }else if (btn.innerHTML=="&lt;&lt;")
30     {//如果btn的内容是<<
31         unsel=unsel.concat(sel);
32         unsel.sort();
33         sel=[];
34         //console.log(unsel);
35     }else if (btn.innerHTML=="&gt;")
36     {//如果btn的内容是>
37         var opts=$("#unsel option");
38         //option对象的selected属性==>true/false
39         //获得unsel下的所有option对象
40         console.log(opts.length);
41         //遍历所有的option
42         for (var i=opts.length-1; i>=0; i--)
43         {
44             //只要当前option的selected有效
45             if (opts[i].selected)
46             {
47                 //使用splice删除unsel中的相同位置的元素,将删除的元素压入sel中
48                 sel.push(unsel.splice(i,1)[0]);
49                 //如果在遍历过程中会影响到下标,建议从后向前遍历
50             }
51         }
52         //遍历结束,对sel进行排序
53         sel.sort();
54
55     }else if (btn.innerHTML=="&lt;")
56     {//如果btn的内容是<
57         var opts=$("#sel option");
58         //console.log(opts.length);
59         for(var i=opts.length-1; i>=0; i--){
60             if(opts[i].selected){
61                 unsel.push(sel.splice(i,1)[0]);
62             }
63         }
64         unsel.sort();
65     }
66     //更新界面
67     updateSel();
68 }
69 function updateSel(){
70     //专门跟新两个select元素的内容
71     //
72     $("#unsel")[0].innerHTML="<option>"+unsel.join("</option><option>")+"</option>";
73     $("#sel")[0].innerHTML="<option>"+sel.join("</option><option>")+"</option>";
74 }

二、获取、添加、删除、修改元素属性

  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。

  示例:修改元素属性 模拟摇号排序

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <title>修改元素的属性</title>
 5 <meta charset="utf-8" />
 6 <script src="js/3_1.js"></script>
 7 </head>
 8 <body>
 9     <!--1. 使用自定义属性实现摇号排名-->
10     <ul>
11         <li>Eric</li>
12         <li>Scott</li>
13         <li>Jerry</li>
14         <li>Tom</li>
15         <li>Rose</li>
16         <li>John</li>
17         <li>Smith</li>
18         <li>Andy</li>
19     </ul>
20 </body>
21 </html>

 1 window.onload=function(){
 2     //获得ul下所有li
 3     var lis=document.querySelectorAll("ul li");
 4     var nums=[];
 5     //反复生成随机数,nums.length<lis.length
 6     //    在1到lis.length之间取1个随机正数n
 7     //    利用nums的indexOf方法,查找是否包含n
 8     //    如果不包含,将n压入nums中
 9     while (nums.length<lis.length)
10     {
11         var n=parseInt(Math.random()*(lis.length-1+1)+1);
12         if(nums.indexOf(n)==-1){
13             nums.push(n);
14         }
15     }
16     console.log(nums);
17     //将nums中的数字,保存到每个li的data-i自定义属性中
18     //遍历nums
19     //    将nums中当前的数字,设置到相同位置的li中的data-i特性上
20     for (var i=0; i<nums.length; i++)
21     {
22         lis[i].setAttribute("data-i",nums[i]);803490
23     }
24
25     //将类数组最想转化为标准数组对象
26     lis=Array.prototype.slice.call(lis);
27     //尽让li的data-i特性相减
28     lis.sort(function(a,b){
29         return a.getAttribute("data-i")-b.getAttribute("data-i");
30         //return a.dataset.i-b.dataset.i;//HTML5中读取自定义属性; "data-xxx"-->dataset的集合中,属性名xxx
31         });
32
33     //清空所有旧li
34     ul=document.querySelector("ul");
35     ul.innerHTML="";
36
37     for (var i=0; i<lis.length; i++)
38     {
39         //将li追加到ul中
40         ul.appendChild(lis[i]);
41     }
42     console.log(lis);
43 }

三、获取和修改元素的样式

  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.属性名

    

时间: 2024-12-29 09:49:48

DOM读取和修改节点对象属性的相关文章

Unit02: 读取和修改节点对象属性

[修改元素的内容和属性] 1.元素的内容 - innerHTML:获取 / 设置 元素开始标签和结束标签里的html内容: 使用固定套路: 1.删除父元素下所有子元素:parent.innerHTML=""; 1.替换父元素下所有子元素:parent.innerHTML="内容"; - innerText/textContent; 获取开始标签和结束标签里的文本内容:不包含元素: IE8          DOM标准 - nodeValue:文本节点的内容: //*

JavaScript之DOM-2 读取和修改节点信息(节点信息、元素的内容、属性)

一.节点信息 节点名称 nodeName - nodeName: 节点的名称,String 类型属性 - nodeName 是只读的 节点类型 nodeType - nodeType:节点类型,Number 类型属性 节点值 nodeValue - nodeValue:节点的值,String类型属性 二.元素的内容 HTML 内容 - 元素节点对象的innerHTML属性读取或设置元素节点中的HTML内容 文本内容 - 元素节点对象的textContent属性用于读取或设置元素节点中的文本内容-

关于Javascript中通过实例对象修改原型对象属性值的问题

Javascript中的数据值有两大类:基本类型的数据值和引用类型的数据值. 基本类型的数据值有5种:null.undefined.number.boolean和string. 引用类型的数据值往大的说就1种,即Object类型.往细的说有:Object类型.Array类型.Date类型.Regexp类型.Function类型等. 当原型对象的属性值为基本类型的数据值时,通过实例对象修改属性值从而引起原型对象的属性值发生变化的情况不会发生.当原型对象的属性值为引用类型的数据值时,通过实例对象修改

Qt之Dom添加和修改节点

使用QtXml模块DOM模式操作XML时,添加修改节点直接使用QDomElement的setNodeValue()方法不起作用,研究好久才发现使用方法有问题,正确方法如下: 1.添加节点 QDomElement root = doc.documentElement(); QDomElement newElem = doc.createElement("test"); QDomText newText = doc.createTextNode("你好"); newEl

解析DOM节点对象的属性

1.文档对象模型(DOM) 定义:允许程序和脚本访问.更改文档内容.样式和结构.它是平台无关的,意味着可以在任何计算机上使用它.它是语言无关的,以为着它能够交换客户机和服务器之间的信息,而不管任意一边使用什么语言. 2.DOM节点 DOM把HTML(或XML)文档视为一颗或者一组数(是指结构类似),也就是有一个顶层和多个构成子层的分支,并且每个子层又有分支和更多子层,顶层是文档(document),而文档的根元素是<html>. 3.节点对象属性 DOM节点对象的属性 属性 方法 childN

JavaScript--DOM修改元素的属性

一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先看看老的方式,获取设置属性吧: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

DOM创建和删除节点、HTML DOM常用对象[转]

创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标签名");        比如: var a=document.createElement("a");          html: <a></a>      2. 设置新元素的关键属性:        比如: a.href="http://tm

轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点

我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种.还是拿上一篇博文的代码实例进行 分析: <span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1