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

【修改元素的内容和属性】

1.元素的内容

- innerHTML:获取 / 设置 元素开始标签和结束标签里的html内容;

使用固定套路:

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

1.替换父元素下所有子元素:parent.innerHTML="内容";

- innerText/textContent; 获取开始标签和结束标签里的文本内容;不包含元素;

IE8          DOM标准

- nodeValue:文本节点的内容;

//***splice返回的是数组,加下标取值;遍历过程中会影响下标,从后向前遍历;

2.元素属性

所有元素都有attributes属性[i]访问;

- 读取属性:

var value=element.getAttribute("属性名");获得任意属性的值;

- 修改属性:

element.setAttribute(name,value);

IE8不支持:用element.attributes("属性名")=value;

- 删除属性:

element.removeAttribute("属性名");

- 判断有没有包含属性:

element.hasAttribute("属性名");->true / false;

property VS Attribute

属性         HTML特性

property:对象在内存中存储的属性,用.访问;

Attribute:元素对象在开始标签定义的HTML属性和自定义属性;

访问HTML标准属性时。二者完全一致:

比如:<a href="http://tmooc.cn"...

a.href-->属性   -->HTML DOM

a.getAttribute("href")-->特性  -->核心DOM

如果访问自定义属性时,二者不通用!

<li /*data-age="29"*/>Eric</li>

读取自定义属性:li.data-age? X

li.getAttribute("data-age");

设置自定义属性:li.age=29-->网页?

li.getAttribute("age")找不到;

li.setAttribute("data-age",29);

将类数组对象转换为标准数组;lis=Array.prototype.slice.call(lis);*********可以使用标准数组的方法;如:soft();

3.元素的样式

- 修改内联样式

1.获取或修改内联样式:style对象

移除:

oldDiv.style.removeProperty("z-index");

oldDiv.removeAttribute("style");

oldDiv.style.zIndex="";

设置:

oldDiv.style.zIndex="1";

问题:仅能操作行内样式;

- 修该样式表中的规则:内部 外部

2步:

1.获得要修改的样式表对象:

var sheet=document.styleSheets[i]; styleSheets:获得网页所有样式表对象;

2.获得要修改的cssRule:

cssRule:样式表一个大括号就是一个cssRule对象;(有嵌套

var cssRule=sheet.cssRules[i];

3.获得cssRule中的属性:

cssRule.style.属性名;

时间: 2024-10-10 17:18:07

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

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

一.获取和修改元素间的内容(3种) 1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文 固定套路:1.删除父元素下所有子元素:parent.innerHTML=""; 2.批量替换父元素下所有子元素:parent.innerHTML="所有子元素标签组成的html" 2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签) textContent 是DOM标准:innerText 是IE8: 3.文本节点

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类型等. 当原型对象的属性值为基本类型的数据值时,通过实例对象修改属性值从而引起原型对象的属性值发生变化的情况不会发生.当原型对象的属性值为引用类型的数据值时,通过实例对象修改

解析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"

VBA读取、增加自定义和修改文档属性

读取系统文档属性 Sub read()On Error Resume Nextrw = 1Worksheets(1).ActivateFor Each p In ActiveWorkbook.BuiltinDocumentProperties    Cells(rw, 1).Value = p.Name    Cells(rw, 2) = p.Value    rw = rw + 1NextEnd Sub 读取自定义文档属性 Sub Macro1() Cells(1, 2) = ActiveWo

泛型约束和利用反射修改对象属性的值

周日了都,昨天休息了一天,今天想想得敲敲代码练习一下,如下关于泛型约束和利用反射修改对象属性的值的, 都挺简单的,呵呵,但时间一长,不经常使用还容易忘记在此就当记录一下了, 首先泛型代码一般是如下的情形: 加了泛型约束,只允许引用类型并且是只能是无参数的构造函数的类型才能传入,也就是不允许给类构造参数传递实参,否则将报错. 错误 1 “XXXXXX.pros”必须是具有公共的无参数构造函数的非抽象类型,才能用作泛型类型或方法“ 1 public static T GetObject<T>(T

反射原理读取对象属性并设置属性值

Dictionary<string, string> dicNodes = new Dictionary<string, string>(); foreach (XmlNode node in nodes.ChildNodes) { if (node.NodeType==XmlNodeType.Element) { dicNodes.Add(node.Attributes["name"].Value,node.Attributes["value&quo

C#实现appSettings节点读取与修改的方法

本文实例讲述了C#实现appSettings节点读取与修改的方法,分享给大家供大家参考.具体方法如下: 关键代码如下: 代码如下: public static string GetAppSettingsValue(string key) { ConfigurationManager.RefreshSection("appSettings"); return ConfigurationManager.AppSettings[key] ?? string.Empty; } public s