03 JS-DOM之--节点属性操作方法（2种）

来源：互联网发布：iphone6软件安装目录编辑：程序博客网时间：2024/06/05 08:25

属性操作两种方法：

1、 dom对象.属性 == dom对象[属性] ;

2、 dom对象.get/set/removeAttribute()

获取属性：dom对象.getAttribute(名称)

设置属性：dom对象.setAttribute(名称, 值)

删除属性：dom对象.removeAttribute(名称)

  //案例-body代码 <body> <a href="#" class="show" title="a标签">我是a链接</a> </body>

1、dom对象.属性 == dom对象[属性] ;

【这两种方法的区别：

如果我们需要一个变量来绑定属性。那么使用[]方法比较好,变量方便随时修改或者替换其他的属性名。

第一种.属性无法识别变量，无法修改。】

        //1.可以设置标签原有的属性        var a = document.getElementsByTagName("a")[0];        console.log(a.title);//a标签        a.title = "我是b标签"；        console.log(a.title);//我是b标签        //2.也可以设置标签没有的属性.如果设置标签没有的属性，将以对象的自定义属性形式存在。不出现在标签上.        a.className = "hide";        console.log(a.className);        a.aaa = "我是aaa";        console.log(a.aaa);        //3.可以赋值获取但是无法删除属性，只能将属性设置为""        a.title = "";

2、 dom对象.get/set/removeAttribute();

      //1.可以设置标签原有的属性      var a = document.getElementsByTagName("a")[0];      console.log(a.getArribute("title"));//获取      a.setAtteibute("title","我是b标签")；//设置属性     //2.如果设置标签没有的属性，将以对象的自定义属性形式存在。出现在标签上.      a.setAttribute("class","hide");      a.setAttribute("bbb","bbb");     //3.可以删除属性。removeAttrbute()方法连带属性一起删除。     a.removeAttribute("href");     a.removeAttribute("title");

注意：

两种方法自定义的属性(非标签自带)，不能相互交叉设置获取。谁设置的谁用。

设置类：class。不能用className

属性类型：

（在这里为了方便学习记忆，我分为三类。）

1、常规属性

2、表单属性

3、style属性

1、常规属性操作：

普通属性数据类型一般都是string

title、src（src属性不能直接获取）

href、innerHTML、className(class属性比较特殊。因为class是关键字，所以class属性在js中为className;)

之所以把href放在第二排，是因为href的值有点特殊：1. href=""——刷新页面2. href="#"——跳转到当前页面的最顶端3. href="javaScript：； " ——禁用a链接点击4. href="javascript:void(0)；"

————常规属性操作案例————-

序号案例名称01京东广告栏关闭02京东狗切换03切换图片04显示和隐藏盒子 05美女相册06隐藏显示二维码07京东导航栏地区选择08开关灯

切换图片（技术点：需要解决a链接页面跳转的问题。解决办法：return false; a链接默认的跳转被关闭。）

案例源码下载地址：https://github.com/luyu1314/03-DOM-case

2、表单属性操作

- type、value

- checked、selected、disabled————表单属性的数据类型很多是布尔类型值

（注：checkbox选中checked、option选中selected、文本框input禁用disabled）

———表单属性操作案例———————–

序号案例名称备注09禁用文本框利用表单的disabled属性10获取失去焦点onfocus/onblur11输入事件（input标签或者可输入内容的标签，只要输入或者删除哪怕一个字母都会触发oninput这个事件）12淘宝/京东获取焦点13input赋值和取值14select选择鲤鱼所在的option标签的selected属性15表单验证16单选多选操作checked属性17全选反选

注：
案例12– 淘宝/京东获取焦点:
标签为input元素定义标记。label元素不会向用户呈现任何特殊效果，不过，它为鼠标用户增进了可用性。如果您在label元素内点击文本，就会出发此控件。
也就是说，用户选择此标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。

案例源码下载地址：https://github.com/luyu1314/03-DOM-case

3、style属性操作

style属性的数据类型是对象object ！

      //body案例     <style>        div {            border: 10px solid #000;        }    </style>     <body>    <div id="box" title="我是div" style="width: 100px;height: 100px;background-color: pink;">我是div的内容</div>    </body>

1.className和style都可以设置样式。

样式少的时候使用style。样式多的时候用class.

div.className——样式多的时候放进一个class里
div.style.属性——既可以获取值，又可以赋值

2.style是对象(方便获取样式中的每一个属性和对应的值)

    console.log(typeof div.title);//string（第一种普通属性）    console.log(typeof div.id);//string    console.log(typeof div.innerHTML);//string    console.log(typeof div.style);//object    console.log( div.style.height);//获取属性相应值    console.log(div.style.backgroundColor);//获取属性相应值

3.style属性值是字符串，没有设置值是空字符串”“；

    console.log(typeof div.style.width);//string    console.log(div.style.top);//空字符串    console.log(11+div.style.top+22);//1122

4.命名规则，驼峰命名。和css不一样（CSS书写样式是background-color，CSS都是用-连接）

console.log(div.style.backgroundColor);

5.无论是设置还是获取只能操作行内式。（只和行内式交互，和内嵌和外链无关）

console.log(div.style.border);//空字符串，因为是内嵌样式console.log(div.style.border);//100px

6.box.style.cssText = “字符串形式样式”；

让盒子的行内样式以字符串形式存在。（可赋值，可获取值）

console.log(div.style.cssText);//width: 100px; height: 100px; background-color: pink;//赋值div.style.cssText = "width: 300px; height: 300px; background-color: red;";

7.style常用属性

backgroundColor
backgroundImage
color
width
height
border
opacity (IE8以前filter: alpha(opacity=xx))

注意：DOM对象style的属性和标签中style内的值不一样，因为在JS中-不能作为标识符

backgroundColor DOM中

background-color CSS中

————-style属性操作案例—————-

序号案例名称18改变盒子大小透明度19input获取高亮20高级隔行变色21百度皮肤和隐藏盒子 22改变位置（位置和层级）

案例源码下载地址：https://github.com/luyu1314/03-DOM-case

0 0