《Java Script DOM编程艺术》读书笔记--DOM_html/css_WEB-ITnose
1、文档:DOM中的“D”
"D"代表document(文档)
2、对象:DOM中的“O”
“O”代表object(对象) 对象的分类
- 用户定义对象(user-defined object)
- 内建对象(native object)
- 宿主对象(host object)
window对象window对象对应着浏览器窗口本身,这个对象的属性和方法通常统称为BOM(浏览器对象模型)BOM提供了window.open和window.blur等方法。以至于被滥用于各种弹出窗口和下拉菜单
3、模型:DOM中的“M”
“M”代表“Model”(模型)DOM把一份文档表示为一棵树(数学意义上的概念)示例代码
Shoping List What to buy
Don’t forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
、
、(这三个属于兄弟关系。也是一个父元素,有三个子元素,他们都是- 元素。
如果你能把一个文档的各种元素想象成一棵家谱树,我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确
4、节点
节点(node)属于网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况,文档是由节点构成的集合。
- 元素节点
- 文本节点
- 属性节点
4、1元素节点
DOM的原子是元素节点(element node)诸如
、、之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素,它是我们的节点树的根元素。
4、2文本节点
在上述例子中,
元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点(text node)。
4、3属性节点
属性节点是对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性,我们可以利用这个属性对包含在元素里的东西做出准确的描述:
Don't forget to buy this stuff.
在DOM中title="a gentle reminder"是一个属性节点(attribute node),在前面的例子中无序清单元素
有个id属性。有些清单元素- 有class属性。
三者之间的关系.png
4、4 CSS
类似javascript脚本,我们也可以将CSS样式嵌在文档
部分(style>标签之间)。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式: 继承(inheritance)是CSS技术中的一项强大功能。1)、 class属性
This pargraph has the special class
So dose this headline
在样式表里可以为上面的代码进行定义
special{font-style: italic;}
还可以这样定义
h2.special{text-transform: uppercase;}
2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符:
样式表定义
#purchases{border:1px solid white;background-color:#333;color:#ccc;padding:1em;}
#purchases li{font-weight:bold;}
4、5获取元素
有3种DOM方法可获取元素节点,分别是通过元素ID、通过标签名和通过类名字来获取
- getElementById
- getElementsByTagName
- getElementsByClassName
1)getElementById
此方法将返回一个与那个有着给定id属性值的元素节点对应的对象,在javascript里注意大小写。它是document对象特有的函数,在脚本代码里,函数名的后面必须跟有一对圆括号,这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数:你想获得的那个元素的id属性的值,这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象,这个对象对应着document对象里的一个独一无二的元素,那个元素的HTLM id属性值是purchases
Shoping List
What to buy
Don’t forget to buy this stuff.
- A tin of beans
-
- Cheese
-
- Milk
-
//利用`typeof`操作符进行验证(typeof操作符可以告诉我们它的操作数是一个字母、数值、函数、布尔值还是对象。 验证可得是一个对象
2)getElementsByTagName
getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字:decument.getElementByTagName(tag)
alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为:3
Shoping List
What to buy
Don’t forget to buy this stuff.
- A tin of beans
-
- Cheese
-
- Milk
-
//代码运行结果显示三个alert对话框,显示的消息都是“object”。 getElementsByTagName允许把一个通配符作为它的参数,通配符(*)必须放在引号里
alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点
var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果,items数组将只包含id属性值是purshase的元素清单的元素
3)getElementByClassName
这个方法让我们能够通过class属性中的类名来访问元素,getElementByClassName也只接受一个参数,就是类名:
getElementByClassName(class)
这个方法的返回值也与getElementsByTagName类似,都是一个具有相同类名的元素的数组。
document.getElementsByClassName("sale")
利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可
alert(document.getElementsByClassName("important sale").length);//对话框显示1,表示只有一个元素匹配。类名的顺序不重要,就算元素还带有更多类名也没有关系。
也可以和getElementById组合使用
var shopping=document.getElementById("purchase"); var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。
getElementByClassName方法非常有用,但只有较新的浏览器才支持它。所以,需要使用已有的DOM方法来实现自己的getElementsByClassName。
function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i5 获取和设置属性
-
getAttribute方法(获取元素的属性)
-
setAttribute方法(更改属性节点值)5、1getAttributegetAttribute是一个函数,它只有一个参数(你所要查询的属性的名称)
- 也是一个父元素,有三个子元素,他们都是
- 元素。
如果你能把一个文档的各种元素想象成一棵家谱树,我们就可以用同样的术语描述DOM。但我觉得称为“节点树”更准确
4、节点
节点(node)属于网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。DOM也是同样的情况,文档是由节点构成的集合。
- 元素节点
- 文本节点
- 属性节点
4、1元素节点
DOM的原子是元素节点(element node)诸如
、、
之类的元素。标签的名字就是元素的名字。元素也可以包含其他的元素。没有被包含在其他元素的唯一元素是元素,它是我们的节点树的根元素。 4、2文本节点
在上述例子中,
元素包含着文本“don't forget to buy this stuff.”它就是一个文本节点(text node)。
4、3属性节点
属性节点是对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性,我们可以利用这个属性对包含在元素里的东西做出准确的描述:
Don't forget to buy this stuff.
在DOM中title="a gentle reminder"是一个属性节点(attribute node),在前面的例子中无序清单元素
- 有个id属性。有些清单元素
- 有class属性。
三者之间的关系.png
4、4 CSS
类似javascript脚本,我们也可以将CSS样式嵌在文档
部分(style>标签之间)。也可以放在另外的一个文件里。**在HTML文件中引用CSS文件的格式:继承(inheritance)是CSS技术中的一项强大功能。1)、 class属性
This pargraph has the special class
So dose this headline
在样式表里可以为上面的代码进行定义
special{font-style: italic;}
还可以这样定义
h2.special{text-transform: uppercase;}
2)、id属性id属性的用途是给网页里的某个元素加上一个独一无二的标识符:
样式表定义
#purchases{border:1px solid white;background-color:#333;color:#ccc;padding:1em;}
#purchases li{font-weight:bold;}
4、5获取元素
有3种DOM方法可获取元素节点,分别是通过元素ID、通过标签名和通过类名字来获取
- getElementById
- getElementsByTagName
- getElementsByClassName
1)getElementById
此方法将返回一个与那个有着给定id属性值的元素节点对应的对象,在javascript里注意大小写。它是document对象特有的函数,在脚本代码里,函数名的后面必须跟有一对圆括号,这对圆括号包含这函数的参数。document.getElementById(id)在getElementById方法中只有一个参数:你想获得的那个元素的id属性的值,这个id属性必须放在单引号或双引号里。docment.getElementById("purchases")这个调用将返回一个对象,这个对象对应着document对象里的一个独一无二的元素,那个元素的HTLM id属性值是purchases
Shoping List What to buy
Don’t forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
验证可得是一个对象
2)getElementsByTagName
getElementsByTagName方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。它的参数是标签的名字:decument.getElementByTagName(tag)
alert(document.getElementsByTagName("li").length);//显示文档里的列表元素个数为:3
Shoping List What to buy
Don’t forget to buy this stuff.
- A tin of beans
- Cheese
- Milk
getElementsByTagName允许把一个通配符作为它的参数,通配符(*)必须放在引号里
alert(document.getElementsByTagName("*").length);//可以知道文档里有多少个元素节点
var shopping=document.getElementById("purchases");var items=shopping.getElementsByTagName("*");//程序运行结果,items数组将只包含id属性值是purshase的元素清单的元素
3)getElementByClassName
这个方法让我们能够通过class属性中的类名来访问元素,getElementByClassName也只接受一个参数,就是类名:
getElementByClassName(class)
这个方法的返回值也与getElementsByTagName类似,都是一个具有相同类名的元素的数组。
document.getElementsByClassName("sale")
利用这种方法还可有查找那些带有多个类名的元素。多个类名之间用空格分开即可
alert(document.getElementsByClassName("important sale").length);//对话框显示1,表示只有一个元素匹配。类名的顺序不重要,就算元素还带有更多类名也没有关系。
也可以和getElementById组合使用
var shopping=document.getElementById("purchase"); var sales=shopping.getElementsByClassName("sale");sales数组中包含的就只是位于“purchases”列表中的带有“sale”类的元素。
getElementByClassName方法非常有用,但只有较新的浏览器才支持它。所以,需要使用已有的DOM方法来实现自己的getElementsByClassName。
function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有的方法return node.getElementsByTagName("*");for (var i=0; i
5 获取和设置属性
- getAttribute方法(获取元素的属性)
- setAttribute方法(更改属性节点值)5、1getAttributegetAttribute是一个函数,它只有一个参数(你所要查询的属性的名称)
上一篇: angularJS时间格式化过滤器详解
下一篇: jQuery自定义框并获取框内数据