节点:

平时开发中常用的节点是:

元素节点: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 标签属性的更多相关文章

  1. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  2. DOM标签属性和对象属性

    DOM元素的属性分为两种 (1)标签属性 直接写在标签上的属性 (2)对象属性 由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性 1.标签属性 (1)设置标签属 ...

  3. javascript DOM document属性

    DOM控制页面中的所有元素 每个载入浏览器的HTML文档都会成为Document对象,利用它可对HTML页面中的所有元素进行访问 常用属性: title:返回或设置当前文档的标题 常用方法 write ...

  4. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  6. DOM对象之查找标签&属性操作

    HTML DOM (文档对象模型) DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法. JavaScript对DOM进行了实现,对应于JavaScript中 ...

  7. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  8. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  9. Dom之标签属性

    一.标签默认属性的查找与修改 查找 <!DOCTYPE html><html lang="en"><head> <meta charset ...

随机推荐

  1. 【.net 深呼吸】细说CodeDom(2):表达式、语句

    在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说,Emit并不是针对代 ...

  2. 【AR实验室】ARToolKit之Example篇

    0x00 - 前言 PS : 我突然意识到ARToolKit本质可能就是一个可以实时求解相机内外参的解决方案. 拿到一个新的SDK,90%的人应该都会先跑一下Example.拿到ARToolKit的S ...

  3. CentOS 7配置LNMP开发环境及配置文件管理

    安装并配置MySQL 5.6 从CentOS从7.x开始默认使用MariaDB.MariaDB完全兼容MySQL,包括API和命令行.但是很多时候我们还是会想要安装MySQL,所以不能直接通过yum命 ...

  4. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  5. 卡片抽奖插件 CardShow

    这个小项目(卡片秀)是一个卡片抽奖特效插件,用开源项目这样的词语让我多少有些羞愧,毕竟作为一个涉世未深的小伙子,用项目的标准衡量还有很大差距.不过该案例采用 jQuery 插件方式编写,提供配置参数并 ...

  6. 为IEnumerable<T>添加RemoveAll<IEnumerable<T>>扩展方法--高性能篇

    最近写代码,遇到一个问题,微软基于List<T>自带的方法是public bool Remove(T item);,可是有时候我们可能会用到诸如RemoveAll<IEnumerab ...

  7. npm 使用小结

    本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理器.这里的 node 包就是指各种 javascript 库. npm 是随同 Nod ...

  8. 设计模式C#合集--单例模式

    单例模式 代码: 第一种: private static Singleton singleton = null; private Singleton() { } public static Singl ...

  9. 移动BPM解决方案分享

    畅通开放  无边界的渠道 效率倍增  更高效的处理方式 即时共享  更强大的决策能力 各种终端应用 帮您实现:新任务通知.任务预警.催办.任务审批.任何数据汇总提醒消息通知...... 短信 客户端: ...

  10. 非技术1-学期总结&ending 2016

    好久好久没写博客了,感觉动力都不足了--12月只发了一篇博客,好惭愧-- 今天是2016年最后一天,怎么能不写点东西呢!! 学期总结 大学中最关键一年的第一个学期,共4个月.前20天在学网络方面的,当 ...