Javascript学习笔记5 DOM

程序员文章站 2022-03-14 23:11:33

...

DOM：文档对象模型，针对HTML和XML文档的一个API，DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构

Node类型

所有的节点类型都继承自Node类型，每个节点都有个nodeType属性，表明节点的类型。
重要的类型包括：

Node.ELEMENT_NODE (1) 元素节点
Node.ATTRIBUTE_NODE (2) 属性节点
Node.TEXT_NODE(3) 文本节点
Node.DOCUMENT_NODE (9) 文档节点

属性

nodeType：保存着节点类型，例如，若是元素节点，该值等于1
nodeName：若是元素节点，那么则是标签名
nodeValue：若是元素节点，该值为null
childNodes：保存一个NodeList对象，可以通过方括号访问子节点。(子节点可能元素、文本节点、注释等，在遍历时务必注意判断节点类型)

var firstChild = someNode.childNodes[0];   //第一个子节点
var count = someNode.childNodes.length;  //子节点的数目

parentNode：指向文档树中的父节点
previousSibling 和 nextSibling：节点的前一个兄弟节点或后一个兄弟节点，没有则为null
firstChild 和 lastChild：节点的第一个子节点和最后一个子节点
ownerDocument：指向整个文档的文档节点

方法

hasChildNodes()：节点包含子节点时返回true
appendChild():追加一个子节点,成功则返回该节点

someNode.appendChild(newNode);

insertBefore():在某子节点之前插入新的子节点。接受两个参数，要插入的子节点和作为参照的子节点

someNode.insertBefore(newNode,someNode.firstChild);  //插入后成为第一个子节点

replaceChild():以新的子节点替换某子节点，接受两个参数，新的子节点和被替换的子节点，返回被替换的节点

someNode.replaceChild(newNode,someNode.lastChild); //替换最后一个子节点

removeChild()：移除子节点
cloneNode():复制某节点，接受一个布尔值参数，为true时表明为深复制，该节点及其子节点树也会被复制，否则只复制该节点（该方法只会复制特性，而不会复制事件处理程序）

var deepList = myList.cloneNode(true);

normalize():在调用此方法节点的后代节点中查找，若找到空文本节点，则删除，若找到相邻的文本节点，则合并

Document类型

document对象是window对象的一个属性，可以将其作为全局对象来访问，其节点类型nodeType为9

属性

documentElement: 指向文档的<html>元素
body：直接指向<body>元素
title：<title>元素的值
URL：包含页面完整的URL
domain：取得页面域名
referrer：取得来源页面的URL

方法

getElementById()：查找元素，接受元素的ID
getElementsByTagName(): 查找元素，接受元素的标签名，返回元素集合
getElementsByName(): 查找元素，接受元素的name属性值，返回元素集合（只限定于HTMLDocument类型）
write()：接受一个字符串参数，将文本原样写入(如果在文档加载完成后，再调用该方法，则会重写整个页面)

document.write("<strong>" + (new Date()).toString() + "</strong>");

writeln()：与write()类似，但是会在末尾自动添加一个换行符（\n）
open()/close():打开和关闭网页的输出流，不常用

特殊集合

document.anchors: 所有带 name 特性的<a>元素
document.forms：所有<form>元素
document.images：所有<image>元素
document.links：所有带 href 特性的<a>元素

Element类型

节点类型nodeType为1，nodeName为元素的标签名，nodeValue为null

属性

attributes：包含着一个NameNodeMap，元素的每个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap。其中每个节点的nodeName就是特性名，而nodeValue就是值

var id = element.attributes["id"].nodeValue;

方法

getAttribute()：访问元素属性，若不存在，则返回null。

div.getAttribute("class");
div.getAttribute("title");

与直接用元素.属性名访问的区别：当访问style属性时，该方法返回CSS文本，而通过属性名访问时，返回一个对象。当访问onclick等事件处理程序时，该方法返回响应的代码，而通过属性名访问时，返回JS函数。

setAttribute()：设置元素属性，接受两个参数，属性名和值

div.setAttribute("id","newid");

removeAttribute()：删除元素特性，接受一个参数，属性名

div.removeAttribute("class");

document.createElement()：创建元素，返回该元素

var div = document.createElement("div");

Text类型

节点类型nodeType为3，nodeName为”#text”，nodeValue为文本值，没有子节点

属性

nodeValue或data：文本节点中包含的文本值
length：文本字符的长度

方法

document.createTextNode()：创建新的文本节点，接受一个文本字符串值

var textNode = document.createTextNode("Hello world");

normalize():在调用此方法节点的后代节点中查找，若找到空文本节点，则删除，若找到相邻的文本节点，则合并

element.normalize();

splitText(): 将一个文本节点分成两个文本节点，接受一个参数，分隔的位置，返回包含后半截文本的新文本节点

var textNode = deocument.createTextNode("Hello world");
element.appendChild(textNode);

var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue);  //"Hello"
alert(newNode.nodeValue);  //" world"
alert(element.ChildNodes.length);  //2

Attr类型

nodeType值为2，nodeName是属性的名称，nodeValue是属性值，在HTML中没有子节点

属性

name：属性名称
value：属性值
specified：布尔值，区别属性时由代码指定的，还是默认的

操作表格

<table>元素的属性和方法

caption：对<caption>元素的指针
rows：对表格中所有行的HTMLCollection
tBodies：对表格中所有<tbody>的HTMLCollection

<tbody>元素的属性和方法

rows：对<tbody>中行的HTMLCollection
insertRow(pos): 在指定位置插入行

tbody.insertRow(0);  //在tbody中的最前面插入一行

deleteRow(pos): 在指定位置删除行

<tr>元素的属性和方法

cells：对<tr>中列的HTMLCollection
insertCell(pos): 在指定位置插入单元格
deleteCell(pos): 在指定位置删除单元格

因此可以使用以上属性和方法更为方便地操作表格

tbody.rows[0].cells[0];   //第一行第一个单元格

NodeList（例如ChildNodes）、NameNodeMap（包含元素的属性节点）、HTMLCollection都是动态集合，他们会随着文档结构的变化而随之更新

Javascript学习笔记5 DOM

Node类型

属性

方法

Document类型

属性

方法

特殊集合

Element类型

属性

方法

Text类型

属性

方法

Attr类型

属性

操作表格

javascript简单性能问题及学习笔记_javascript技巧

JavaScript学习笔记：数组(四)_html/css_WEB-ITnose

通过javascript修改class名字-学习笔记

JavaScript DOM学习第六章表单实例_基础知识

JavaScript高级程序设计（第3版）学习笔记11 内建js对象_基础知识

JavaScript学习笔记（十）_javascript技巧

HTML5学习笔记1_html/css_WEB-ITnose

php基础学习笔记—javascript（5）

PHP学习笔记5-类的继承/方法重写，学习笔记5-

javascript 权威指南学习笔记3：javascript 作用域

Javascript学习笔记5 DOM

Node类型

属性

方法

Document类型

属性

方法

特殊集合

Element类型

属性

方法

Text类型

属性

方法

Attr类型

属性

操作表格

javascript简单性能问题及学习笔记_javascript技巧

JavaScript学习笔记：数组(四)_html/css_WEB-ITnose

通过javascript修改class名字-学习笔记

JavaScript DOM学习第六章 表单实例_基础知识

JavaScript高级程序设计（第3版）学习笔记11 内建js对象_基础知识

JavaScript学习笔记（十）_javascript技巧

HTML5学习笔记1_html/css_WEB-ITnose

php基础学习笔记—javascript（5）

PHP学习笔记5-类的继承/方法重写，学习笔记5-

javascript 权威指南 学习笔记3：javascript 作用域

JavaScript DOM学习第六章表单实例_基础知识

javascript 权威指南学习笔记3：javascript 作用域