博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript学习笔记之DOM
阅读量:5932 次
发布时间:2019-06-19

本文共 4099 字,大约阅读时间需要 13 分钟。

hot3.png

  1. 这里是列表文本这里是列表文本DOM可以将任何HTML和XML文档描绘成一个由多层节点构成的结构。示例如下:文档节点是每个文档的根节点,文档节点只有一个子节点,即<html>,我们称之为文档元素。文档元素是文档的最外层元素,每个文档只能有一个文档元素。在HTML页面中,文档元素始终是<html>元素。在<xml>中,没有预定义的元素,因此任何元素都有可能成为文档元素。
 Sample Pages    

Hello World

#Node类型:

  1. 这里是列表文本DOM1级定义了一个Node接口,该接口由DOM中的所有节点类型实现。除了IE外,其他所有浏览器中都可以访问到这个类型。所有节点都继承自Node类型,因此所有节点都共享着相同的基本属性和方法。每个节点都有一个nodeType属性,用于表明节点的类型,总共有12个常量:
  • Node.ELEMENT_NODE(1);
  • Node.ATTRIBUTE_NODE(2);
  • Node.TEXT_NODE(3);
  • ......
  1. 为了确保跨浏览器兼容,最好还是将nodeType属性与数字值进行比较。如:
if(some.nodeType==1){  alert("Node is an element"); }
  1. 对于元素节点,nodeName中保存的始终是元素的标签名,而nodeValue则始终为null;
  2. 每个节点都有一个childNodes属性,保存着NodeList对象。它是一个类数组对象,虽然可以使用方括号语法来访问NodeList的值,而且这个对象也有length属性,但它并不是Array的实例。但可以使用Array.prototype.slice()方法将其转换为数组。另外,也可以使用item()方法访问保存在NodeList中的节点。示例如下:
var firstChild = someNode.childNodes[0];var secondChild = someNode.childNodes.item(0);var count = someNode.childNodes.length;

5.每个节点都有一个parentNode属性,包含在childNodes列表中的所有节点都具有相同的父节点。同一个列表中的每个节点,可以通过每个节点的previousSibling和nextSibling属性,访问其他节点。列表中的第一个节点的previousSibling属性为null,而列表中的最后一个节点的nextSibling属性的值同样也为null。 用法:

console.log(aa.childNodes[0].nextSibling);console.log(aa.childNodes[0].previousSibling);

6.父节点与其第一个和最后一个子节点之间也存在特殊关系。父节点的firstChild始终等于someNode.childNodes[0],lastChild始终等于childNodes[someNode.childNodes.length-1]。hasChildNodes()方法在包含一个或多个子节点的情况先返回true;这是比查询childNodes列表中的length属性更简单的方法。

7.虽然所有节点类型都继承自Node,但并不是每种节点都有子节点。
8.

  • appendChild()方法返回新增的节点
  • insertBefore()接受2个参数:插入节点和作为参照的节点(插入后哪个节点前面),当参照节点是null时,insertBefore()和appendChild()执行相同的操作。
  • replaceChild()接收2个参数:插入节点和替换节点。要替换的节点返回并被移除。
  • removeChild()移除节点。上述两种方法移除和替换的节点仍然为文档所有,只是在文档中没了自己的位置。
  • someNode.removeChild(); 上述四种方法都必须先取得父节点(使用parentNode属性) cloneNode()复制节点,其接受一个参数true(深复制包含子节点)或false(浅复制只复制标签不包含子节点及文本),复制的节点副本属于文档所有,但并没有为它指定父节点,需使用上述的appendChild(),insertBefore()等方法添加到文档中。 normalize(); #Document类型: 1.document对象是HTMLDocument(继承自Document类型)的一个实例。
    2.所有浏览器都支持document.documentElement(取得对<html>的引用)和document.body属性。
    3.document.title取得文档标题。document.url/domain/referrer
    4.getElementById()
    getElementsByTagName()方法,返回包含0个或多个元素的NodeList。在HTML文档中,方法返回一个HTMLCollection对象,该对象与NodeList非常类似。若向此方法中传递一个“*”,便可取得文档中的所有元素。 getElementsByName(),只有HTMLDocument类型才有的方法,返回给定name特性的所有元素。
    5.特殊集合
  • document.anchors,包含文档中所有带name特性的<a>元素。
  • document.forms,包含文档中所有的<form>元素。
  • document.images,包含文档中所有的<img>元素。
  • document.links,包含文档中所有带href特性的<a>元素。 这些特殊集合始终都可以通过HTMLDocument对象访问到,与HTMLCollection对象类似。
    6.文档写入
    讲输出流写入到网页中的能力。这个能力体现在4个方法:
  • write():原样写入
  • writeln():会在字符串的末尾添加一个换行符(\n)。 上述两个方法可以在页面中动态地加入内容:例:
document.write(""+(new Date()).toString()+"");

注:document.write()方法在页面被呈现的过程中直接向其中输出了内容。如果在文档加载结束后再调用document.write(),那么输出的内容将会重写整个页面。如下所示:加载结束

window.onload = function(){       document.write(""+(new Date()).toString()+"");}

open()和close()分别用于打开和关闭网页的输出流。如果在页面加载期间使用write()或writeln()方法,则不需要用到这两个方法。 #Element类型

  1. attributes属性
  • getNamedItem(name):返回nodeName属性等于name的节点
  • setNamedItem(node):向表中添加节点,以节点的nodeName属性为索引
  • removeNamedItem(name) 移除nodeName属性等于nodeName的节点
var id=document.getElementById("aaa").attributes.getNamedItem("class");console.log(id) //返回class=“bbb”
  1. 元素的子节点
  • item 1
  • item 2
  • item 3

如果IE来解析这些代码,ul元素会有3个子节点,分别是3个li元素,在其他浏览器中,<ul>有7个元素,包括3个<li>元素和4个文本节点(<li>元素之间的空白符),如下:如果将空白符删除,则所有浏览器返回相同数目的子节点。可以用children()正确获取

  • item 1
  • item 2
  • item 3

所以,如果要通过childNodes属性遍历子节点,通常要检查一下nodeType属性,只有在等于1的情况下(表示元素节点):

for(var i=0,len=element.childNodes.length;i
var element = document.createElement('div');element.className = "message";var textNode = document.createTextNode("hello world");element.appendChild(textNode);document.body.appendChild(element);var newNode = element.firstChild.splitText(5);//element 包含2个文本节点console.log(element.firstChild.nodeValue);  //hello  console.log(element.lastChild.nodeValue);  // worldconsole.log(newNode.nodeValue);  //" world" 从5的位置开始取

#Comment类型 注释节点,注释节点是div的一个子节点,可以通过代码访问

#DocumentFragment 文档片段不属于文档树,即使使用appendChild()或insertBefore()将文档片段的所有子节点添加到文档中,也只会将文档片段的所有子节点添加到相应位置上;文档片段本身不会成为文档树的一部分。 #Attr类型

  1. 元素的特性在DOM中以Attr类型表示,所有浏览器都可以访问Attr类型的构造函数和原型。 #DOM操作技术

转载于:https://my.oschina.net/yanbiwei/blog/846563

你可能感兴趣的文章
29.typedef
查看>>
windows下搭建svn服务器及权限配置
查看>>
匿名函数和闭包
查看>>
编程乐趣:一个强制换行的小方法
查看>>
总结了下关于Spring框架的重要问题
查看>>
Proxmox VE2.2虚拟化安装配置学习笔记(一)
查看>>
ThinkPHP中配置伪静态(URL重写)规则
查看>>
Python version 2.7 required, which was not foun...
查看>>
maven 配置
查看>>
原子操作
查看>>
Android开发必不可少原理问题
查看>>
iOS 离屏渲染
查看>>
rm、cp、mV相关用法
查看>>
百分90响应时间
查看>>
asp.net 实现所谓的计划任务(举例)
查看>>
C/C++ 技术问题整理
查看>>
CCObject、CCCopy 类的分析
查看>>
主流webservice框架整理
查看>>
简化版的SHA1算法C语言版
查看>>
分布式文件系统MFS(moosefs)实现存储共享(第二版)
查看>>