HTML的DOM编程

 

HTMLDOM对象和DOM API

DOM(Doucment Object Model)被称作文档对象模型,它是语言和平台中立的接口,允许程序和脚本动态访问和更新文档的内容,结构和风格。

浏览器读取HTML文档以后,将HTML文档按照标签的组合在内存中形成一棵DOM树,使用javascript编程时,为了灵活地操作各个HTML元素和标签,需要熟练掌握DOM对象及其API,由于不同的浏览器中,对于HTMLDOM对象定义的不太相同,这里这说明通用的情况。

HTML中的5中节点:

元素节点:HTML标签对应的是DOM中的元素节点。

文本节点:HTML中的文本内容对应DOM中的文本节点。

注释节点:HTML中的注释对应DOM树中的注释节点。

属性节点:HTML标签中的属性对应DOM树的属性节点,注意:属性节点比较特殊,它是包含于元素节点中的,没有父子节点。

根节点:Document对象,它不对应于HTML页面中的任何内容,确实这个页面DOM树的根节点。而<HTML>只是根元素节点,不是根节点。

 

根节点的属性和方法:

documentElement属性:表示文档的根元素节点。HTML文档中代表的是<HTML>元素节点。

createAttribute(属性名称)方法:用指定名字创建新的属性节点。

createComment(注释信息)方法:用指定的字符串创建新的注释节点。

createElement(节点标签名)方法:用指定的标记名创建新的元素节点。

createTextNode(文本信息)方法:用指定的文本创建新的文本节点对象。

getElementById(节点的id属性值)方法:返回文档中具有指定id属性的元素节点。

getElementsByTagName(标记名称)方法:以数组方式返回文档中具有指定标记名的所有元素节点,其顺序为在文档中出现的顺序。

 

元素节点的属性和方法:

tagName属性:元素的标记名,如<table>元素的标记名为:table,注意:HTML文档返回的标记名字均为大写。

getAttribute(属性名)方法:以字符串形式返回指定属性的值。

getAttributeNode(属性名)方法:以属性节点对象形式返回指定属性名的属性节点。

getElementsByTagName(节点标记名)方法:以数组形式返回当前元素节点的子孙节点中具有指定标记名的所有元素节点,其顺序为在文档中出现的顺序。

has Attribute(属性名)方法:如果该元素具有指定名称的属性,则返回true

removeAttribute(属性名)方法:从元素节点中删除指定的属性。

removeAttributeNode(属性名)方法:从元素节点属性列表中删除指定的属性节点。

setAttribute(属性名,属性值)方法:把指定的属性设置为指定的值,如果该属性不存在则添加一个新的属性。

setAttributeNode(属性节点对象)方法:把指定的属性节点添加到该元素的属性列表中。

attributes属性:表示该节点的所有属性节点对象的数组。

childNodes()方法:返回当前节点的子节点数组。如果没有子节点,则返回空数组。

firstChild()方法:返回当前节点的第一个子节点。如果没有子节点,则返回null

lastChild()方法:返回当前节点的最后一个子节点。如果没有子节点,则返回null

nextSibling()方法:返回当前节点的下一个兄弟节点。如果没有,则返回null

previousSibling()方法:返回当前节点的上一个兄弟节点。如果没有,则返回null

nodeName()方法:返回节点的名字,对于元素节点返回元素节点的标记名。

nodeType属性:节点的类型。

nodeValue属性:节点的内容。对于文本节点,其值是文本内容。对于注释节点,其值是注释内容。对于属性节点,其值是属性值。对于其他类型节点,其值可能为null

parentNode()方法:返回当前节点的父节点。如果没有,则返回null

appendChild(节点对象)方法:给当前节点增加一个子节点。增加的子节点位于当前节点的所有子节点的末尾。

cloneNode(true|false)方法:复制当前节点,或者复制当前节点以及其所有的子孙节点。true表示递归的复制所有子孙节点,false表示只复制当前的节点。

hasChildNode()方法:如果当前节点有子节点,则返回true

 

属性节点的属性:

name属性:属性名称。

value属性:属性值。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值