当前位置: 代码迷 >> 综合 >> dom-day02
  详细解决方案

dom-day02

热度:56   发布时间:2023-12-01 11:10:14.0

2018.9.4 星期二

Document类型
document对象是HTMLDocument的一个实例。
HTMLDocument继承自Document。
document存在window中。即document对象是window对象的一个属性,因此可以直接调用。

Document的属性和方法:

文档子节点,可以继承Node中所有的属性和方法。
属性:通过document对象获取。document.title
documentElement 始终指向HTML页面中元素
body 直接指向元素
title 获取文档的标题
URL 路径。取得完整的URL。统一资源定位符。
domain 取得域名,并且可以进行设置,在跨域访问在经常会用到。
referrer 取得前一个页面的URL,即来源页面的URL。
doctype 访问
images 获取所有的img对象,返回HTMLCollection类数组对象。
forms 获取所有的form对象,返回HTMLCollection类数组对象。
links 获取文档中所有的带有href属性的元素

**查找元素:**注意:因为id属性是唯一的,所以Element不加s,其他3个方法用复数Elements。getElementById()通过id获取,如果找到对应的id则返回该元素,否则返回null。如果页面中有多个元素的id值相同,只返回文档中第一次出现的元素。getElementsByTagName()参数为要取得元素的标签名。返回类数组对象,即HTMLCollection对象。如果元素中有id或name,会将id和name的值都映射成为HTMLCllection对象的属性。可以通过namedItem(id值或者name值)访问item[0][0]getElementsByName('name')参数为元素的name返回值是NodeList类数组,即HTMLCollection对象。是通过name属性值来获取的 getElementsByClassName('class')参数为一个字符串多个class属性值以空格隔开。返回值是HTMLCollection类数组。createElement('标签名')创建一个元素节点,要记得追加节点createAttribute('id')  Attr实例

Element类型:
HTML元素:
所有的HTML元素都由HTMLElement类型表示,或者其子类型表示。
每个HTML元素都应具有如下一些属性以及html元素特有的属性。
id 元素在文档中的唯一标识
title 有关元素的附加说明信息
className 与元素class特性对应
src img元素具有的属性
alt img元素具有的属性
lang 元素内容的语言代码,很少使用!
dir 语言方向,ltr左到右,rtl右到左

 特性的名称不区分大小写。**取得自定义属性:**getAttribute()参数为实际元素的属性名,class,name,id,title,lang,dir一般只有在取得自定义特性值的情况下,才会用该方法。大多数直接用属性进行访问,比如style,onclick。**设置属性:**dom.className="one";dom.setAttribute("className","one");**移除属性:**removeAttribute();attribute属性,其中包含了一个NameNodeMap,与NodeList类似。getNamedItem(name)   返回nodeName属性等于name的节点removeNamedItem(name)   从列表中删除nodeName属性等于name的节点setNamedItem(node)   向列表中添加一个节点item(2)   返回位于位置2处的节点**创建元素:**createElement() 参数为要创建的元素标签名,该标签名在HTML中不区分大小写,但在XML中区分大小写。    /*属性 Attr:元素对象.属性名  获取属性值元素对象.getAttribute('属性名')获取属性值,获取自定义属性值一般情况下,获取style和onclick属性的时候,返回的是字符串元素对象.属性名 = 属性值添加或修改属性值元素对象.setAttribute('属性名','属性值')添加或修改属性值attrs = 元素对象.attributes获取所有的属性组成的类数组对象该类数组对象有以下方法:attrs.getNamedItem('属性名')获取属性名对应的元素返回值是一个Attr实例,id = 'one'attrs.removeNamedItem('属性名')  删除属性名对应的元素 attrs.setNamedItem(Attr实例);如何创建Attr实例?并设置值?var node = document.createAttrebute('属性名');node.value = '属性值';    item(index)  获取index位置上的元素  */

作为文档树的文档,将文档看作是Element对象树,忽略文档Text,Comment节点。
以下是Element中的属性:
children 所有元素孩子节点。类似于childNodes,返回NodeList对象,但是该对象中仅包含Element对象。
firstElementChild 第一个孩子元素节点
lastElementChild 最后一个孩子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
childElementCount 子元素的数量,返回值和children.length的值相等。

元素内容:
innerHTML 返回元素内容
innerText 内部文本
textContent


Text类型
文本节点。包含的是可以按照字面解释的纯文本内容。

length 文本长度
appendData(text) 追加文本
deleteData(beginIndex,count) 删除文本。参数为删除起点和删除个数。
insertData(beginindex,text) (在起始位置前)插入文本。参数为插入的起始位置和文本。
replaceData(beginIndex,count,text) 替换文本
splitText(beginIndex) 从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(‘文本’) 创建文本节点,参数为要插入节点中的文本
substringData(beginIndex,count) 从beginIndex开始提取count个子字符串

Comment类型


Comment类型
data 获取注释的内容

Document的创建方法:
createElement(‘标签名’)
createAttribute(‘属性名’)
createTextNode(‘文本’)