JavaScript dom 标签属性
节点:
平时开发中常用的节点是:
元素节点:nodeType值是 1 --> <a>,<p>......
属性节点:nodeType值是 2 --> title,href,src......
文本节点:nodeType值是 3 --> 内容
获取html标签内容:
document.getElementById(""):接受一个id值,返回的不是内容,而是包括标签在内的所有内容
document.getElementsByTagName(""):接受一个标签名(所有属于这个标签名的标签组组成一个数组),返回的不是内容,而是包括标签在内的所有内容
利用数组的方式去找到需要操作的标签arr[i];
document.getElementsByClassName(""):接受一个class的值(所以属于这个class名的标签组成一个数组),返回不是内容,而是包括标签在内的所有内容
利用数组的方式去找到需要操作的标签arr[i];
获取和设置属性(改变属性不是改变内容):
getAttribute:获取属性值
例:document.getElementsByTagName("a")[0].getAttribute("href"):获取a标签对象数组的第一个a标签的href属性的内容;
setAttribute:对属性值进行修改
例:document.getElementsByTagName("a")[0].setAbbrbute("href","hello world"):把第一个a标签的href属性改为hello world;
如果需要对多个p的title属性进行读取或者修改可以利用for循环来实现;
提示:利用setAttribute还可以对标签添加属性。
ps:有一个非常值得关注的细节,当我们使用setAttribute对文档做出修改时,通过查看源代码,我们可以发现,依然是改变前的属性值,也就是说setAttribute做出的修改不会方应在文档本身的源代码里面,这种表里不一的现象源自于DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力,对页面内容进行刷新却不需要在浏览器里刷新页面
获取和设置内容:
前面的内容讲了怎么获取和修改属性和属性值,但是有时我们需要获取到内容来修改html文档中已有的内容。
childNodes属性:获取任何一个元素的所有子元素,他是一个包含这个元素全部子元素的数组。
格式:element.childNodes
利用:element.childNodes.length可以查看一共有多少个子元素
但是,从childNodes获取的子元素不只只有元素节点,还有各种各样的其他子节点,这是需要其他属性来帮助其选择到元素节点
nodeType属性:利用其指定节点
格式:node.nodeType
nodeType的值是一个数字,而不像其他的那样是一个英文字符串;
这就意味着,可以让函数只对特定类型的节点进行处理,例如,完全可以编写一个只处理元素节点的函数
nodeValue属性:改变文本节点的值,用来得到和设置一个节点的值;
格式:node.nodeValue
firstChild属性:访问 childNodes属性的第一个值
lastChild属性:访问 childNodes属性的最后一个值
JavaScript dom 标签属性的更多相关文章
- JavaScript DOM 元素属性 状态属性
JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...
- DOM标签属性和对象属性
DOM元素的属性分为两种 (1)标签属性 直接写在标签上的属性 (2)对象属性 由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性 1.标签属性 (1)设置标签属 ...
- javascript DOM document属性
DOM控制页面中的所有元素 每个载入浏览器的HTML文档都会成为Document对象,利用它可对HTML页面中的所有元素进行访问 常用属性: title:返回或设置当前文档的标题 常用方法 write ...
- javascript之DOM编程通过html元素的标签属性找节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- DOM对象之查找标签&属性操作
HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...
- DOM对象属性(property)与HTML标签特性(attribute)
HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...
- html标签属性(attribute)和dom元素的属性(property)
简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...
- Dom之标签属性
一.标签默认属性的查找与修改 查找 <!DOCTYPE html><html lang="en"><head> <meta charset ...
随机推荐
- 如何一步一步用DDD设计一个电商网站(九)—— 小心陷入值对象持久化的坑
阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...
- 算法与数据结构(九) 查找表的顺序查找、折半查找、插值查找以及Fibonacci查找
今天这篇博客就聊聊几种常见的查找算法,当然本篇博客只是涉及了部分查找算法,接下来的几篇博客中都将会介绍关于查找的相关内容.本篇博客主要介绍查找表的顺序查找.折半查找.插值查找以及Fibonacci查找 ...
- 谈谈JS中的函数节流
好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...
- JavaScript 常量定义
相信同学们在看见这个标题的时候就一脸懵逼了,什么?JS能常量定义?别逗我好吗?确切的说,JS当中确实没有常量(ES6中好像有了常量定义的关键字),但是深入一下我们可以发现JS很多不为人知的性质,好好利 ...
- CSS 3学习——transition 过渡
以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...
- Kafka副本管理—— 为何去掉replica.lag.max.messages参数
今天查看Kafka 0.10.0的官方文档,发现了这样一句话:Configuration parameter replica.lag.max.messages was removed. Partiti ...
- VS2015墙内创建ionic2
开始学习ionic2,试验各种方法,感觉以下是紧跟rc版本的最佳方案 STEP1 设置cnpm npm install -g cnpm --registry=https://registry.npm. ...
- 使用Hudson搭建自动构建服务器
环境: ubuntu1404_x64 说明: 使用hudson和git搭建自动构建服务器的简单示例 安装hudson及相关插件 安装hudson 安装命令如下: sudo sh -c "ec ...
- 【初码干货】【Azure系列】1、再次感受Azure,体验Windows Server 2016并部署BlogEngine.NET
上个月末,在某人的建议下,重新注册了一个1元试用账户(包含1个月期限的1500元订阅),并充值了1000元转为了正式账户,相当于1000元得到了2500的订阅,于是又一次开启了Azure之旅. 在这不 ...
- ubuntu中查看已有的mysql用户并修改用户名和密码
你先进入/etc/mysql 然后该目录下会有一个debian.cnf文件,用sudo cat debian.cnf查看里面的内容. 如果用户名为 debian-sys-maint 使用 mysql ...