《JS高程(3)》DOM节点层次Element类型-第10章笔记(13)

    xiaoxiao2021-03-26  20

    除了Document类型之外,Element类型是Web编程中最常用的类型。

    Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。

    nodeType的值:1nodeName的值:元素的标签名nodeValue的值:nullparentNode的值:Document/Element子节点Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference <div id = "myDiv"></div> var div = document.getElementById("myDiv"); // HTML中,标签名始终都以全部大写表示 //XML(XHTML标签名始终会与源代码保持一致) alert(div.tagName);//"DIV" alert(div.tagName == div.nodeName)//true

    HTML元素

    id元素在文档中的唯一标识符title通过工具提示条显示出来lang元素内容的语言代码dir语言方向,值为“ltr”(从左至右)或”rtl”(从右至左)很少用className与元素的class特性对应,即为元素指定的CSS类 <div id = "myDiv" class = "bd" title = "body text" lang = "en" dir = "ltr"> var div = document.getElementById("myDiv"); alert(div.id); //"myDiv" alert(div.className); //"bd" alert(div.title); //"body text" alert(div.lang); //"en" alert(div.dir); //"ltr"

    取得和修改特性

    每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息,操作特性的DOM方法主要有三个:

    方法参数功能getAttribute()接收一个参数:与实例名相同获取自定义特性setAttribute()接收两个参数:要设置的特性名和值修改或创建该属性并设置相应的值removeAttribute()接受一个参数:所要删除的元素名彻底删除元素的特性 var div = document.getElementById("myDiv"); alert (div.getAttribute("id")); //"myDiv"

    getAttribute()不经常使用,,只是用对象的属性,在取得自定义特性值的情况下,才会是有用getAttribute().

    attributes属性

    Element类型是使用attributes属性的唯一一个DOM节点类型。 attributes属性中包含一个NameNodeMap,与NodeList类似,是一个动态集合。

    创建元素

    方法参数功能document.createElement()接收一个参数:既要创建元素的标签名创建新元素 var div = document.createElement("div"); //将元素添加到<body>元素中 document.body.appendChild(div);

    元素的子节点

    元素可以由任意树木的子节点和后代节点,因为元素可以是其他元素的子节点。

    <ul id = "myList"> <li>item1</li> <li>item2</li> <li>item3</li> </ul>

    在IE浏览器中,< ul>元素有3个子节点,分别是3个< li>元素;在其他浏览器中有7个元素,分别是3个< li>元素和4个文本节点(< li>元素的空百符),把所有的空白符删除,那么所有浏览器就会返回相同的子节点。 因此在执行某项操作前,都要先检查一下nodeType属性:

    for (var i = 0, len = element.childNodes.length; i < len; i++){ //遍历子节点,当子节点的nodeType等于1的情况下,才会执行某些操作 if(element.childNodes[i].nodeType == 1){ //执行某些操作 } }
    转载请注明原文地址: https://ju.6miu.com/read-660169.html

    最新回复(0)