上一节我们在“DOM基础”学习了对元素节点的操作，这两节介绍对属性节点的操作。

属性节点操作有两种方式，一种是使用“对象属性”，另一种是“对象方法”。本节主要介绍“对象属性”的方式。

对属性节点的操作涉及两种操作，分别是获取HTML属性值和设置HTML属性值。

获取HTML属性值

用法：

obj.attr

obj即是我们上一节获取的元素节点，attr是属性名。

获取属性

举例： 

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>获取属性title>

<script>

window.onload = function(){

var oBtn = document.getElementById("btn1");

oBtn.onclick = function(){

 alert(oBtn.id);

}

}

script>

head>

<body>

<input type="button" id="btn1" class="btn2" value="获取属性" />

body>

html>

获取id用oBtn.id，获取class需要用oBtn.className，获取type用oBtn.type。

获取文本框值

举例：

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>获取文本框值title>

<script>

window.onload = function(){

 var oBtn = document.getElementById("btn");

                oBtn.onclick = function(){

                    var oTxt = document.getElementById("txt")

                    alert(oTxt.value);

                }

}

script>

head>

<body>

<input type="text" id="txt"/>

<input type="button" id="btn" value="获取文本框值" />

body>

html>

获取单选框值

举例：

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>获取单选框值title>

<script>

window.onload = function(){

var oBtn = document.getElementById("btn");

var oKing = document.getElementsByName("king");

oBtn.onclick = function(){

for(var i = 0;i < oKing.length;i++){

if(oKing[i].checked){

alert(oKing[i].value)

}

}

}

}

script>

head>

<body>

<div>

<label><input type="radio" name="king" value="刘德华" checked/>刘德华label>

<label><input type="radio" name="king" value="张学友" />张学友label>

<label><input type="radio" name="king" value="郭富城" />郭富城label>

<label><input type="radio" name="king" value="黎明" />黎明label>

div>

<input type="button" id="btn" value="获取单选框值" />

body>

html>

获取下拉菜单的值

举例：

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>获取下拉菜单的值title>

<script>

window.onload = function(){

var oBtn = document.getElementById("btn");

var oSelect = document.getElementById("select")

oBtn.onclick = function(){

alert(oSelect.value);

}

}

script>

head>

<body>

<select id="select">

<option value="刘德华">刘德华option>

<option value="张学友">张学友option>

<option value="郭富城">郭富城option>

<option value="黎明">黎明option>

select>

<input type="button" id="btn" value="获取下拉菜单的值" />

body>

html>

当用户选中一个option时候，该option的value值会成为select的value值。

设置HTML属性值

用法与获取HTML属性值的方式相同。

举例：

DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>设置HTML属性值title>

<script>

window.onload = function(){

var oBtn = document.getElementById("btn");

oBtn.onclick = function(){

oBtn.value = "button";

}

}

script>

head>

<body>

<input type="button" id="btn" value="获取" />

body>

html>

没有按按钮结果图

点击“获取”后

本节主要学习了使用“对象属性”对属性节点操作，最后对其总结。

  • 获取HTML属性值

  • 设置HTML属性值

操作对象_DOM进阶——HTML属性操作(对象属性)相关推荐

  1. 数据库级联操作mysql_数据库进阶实践-级联操作 --

    数据库进阶实践 级联操作 Cascade意为"级联操作",就是在操作一个对象的同时,对相关的对象也执行某些操作.我们通过一个Post模型和Comment模型来演示级联操作,分别表示 ...

  2. JavaScript中的对象学习笔记（属性操作）

    本文是笔者学习JavaScript时做的笔记,大部分内容来自<JavaScript权威指南>,记录学习中的重点,并引入一些其他博文和与其他程序员讨论的内容,供本人日常翻阅.如有疑问,请留言 ...

  3. JavaWeb_域对象的属性操作

    JavaWeb_域对象的属性操作 和属性相关的方法: 1)方法 Object getAttribute(String name):获取指定的属性 Enumeration getAttributeNam ...

  4. 了解JavaScript 对象的属性操作

    提起操作, 很多人都会想到我们学习过程中最经常做的操作, 就是对数据库进行增, 删, 改, 查, 既然提到这个, 那么对于对象的属性操作也不例外, 基本上可以说也是这几个操作. JS中对象的属性标签 ...

  5. [jQuery基础] jQuery对象 -- 属性操作

    属性操作 属性和属性节点 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值 对象.属性名称 对象["属性名称"] = 值 对象[" ...

  6. js获取对象数组中指定属性值对象_3分钟学会操作JavaScript内置对象，快来试试吧...

    1 - 内置对象 1.1 内置对象 JavaScript 中的对象分为3种:自定义对象 .内置对象. 浏览器对象. 前面两种对象是JS 基础 内容,属于 ECMAScript: 第三个浏览器对象属于 ...

  7. JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  8. java8 di_java8 多个list对象用lambda求差集操作

    业务场景:调用同步接口获取当前全部有效账户,数据库已存在部分账户信息,因此需要筛选同步接口中已存在本地的帐户. 调用接口获取的数据集合 List list = response.getData().g ...

  9. java 对象复制 反射_利用Java反射机制实现对象相同字段的复制操作

    一.如何实现不同类型对象之间的复制问题? 1.为什么会有这个问题? 近来在进行一个项目开发的时候,为了隐藏后端数据库表结构.同时也为了配合给前端一个更友好的API接口文档(swagger API文档) ...

最新文章

  1. 边缘AI是内存技术发展的催化剂
  2. poj 2392 dp 不是很懂哎！！！Space Elevator
  3. BarTender操作遇到OLE DB遇到了错误0x80004005”的问题
  4. Vue 高效清空表单，一键清空表单
  5. 8.FreeRTOS学习笔记-软件定时器
  6. [Ext JS6实战] Ajax获取Tree Store
  7. wifi丢包率高怎么解决_笔记本没有显示wifi列表怎么解决？
  8. 洛谷 P1114 “非常男女”计划
  9. 链接link使用href=“#”和href=##的区别
  10. 吉米多维奇数学分析习题集每日一题--泰勒公式习题1378
  11. jcp 打印机字体变淡变模糊bootstrap
  12. 汽车制动能量回收系统仿真模型
  13. WPS 页码设置为（前1...前3，后4...后6）
  14. 简单的几句话让你理解”什么是备份、容灾、集群、负载均衡”
  15. 推荐一本书：《人生十论》 钱穆 著
  16. html前端的几种加密/解密方式
  17. java maven log4j配置_如何在Maven构建的Java项目中使用log4j
  18. USDCNY即期均值顺势信号——基于Python的均值回归进阶策略
  19. 教你用Python画一棵圣诞树
  20. 一个程序员的时间管理(GTD)

热门文章

  1. 自定义依赖注解无效_SpringValidation用注解代替代码参数校验解析
  2. c语言实现http服务器_基于postman实现http接口测试过程解析_服务器其它
  3. linux打包cpio命令例子,linux压缩命令——tar、cpio详解
  4. mysql cve 2016 3521_MySQL-based databases CVE -2016-6663 本地提权
  5. layui向body添加html_layui 各项配置
  6. java gzip rest_RestTemplate与Gzip压缩
  7. Pytest fixture参数化params
  8. SWT folder ‘..\framework\x86_64‘ does not exist. Please set ANDROID_SWT to point to the folder conta
  9. 洛谷 P2921 在农场万圣节Trick or Treat on the Farm题解
  10. mac系统，鼠标移动太慢