js基础篇–DOM类型总结

发布于 2018-11-21  278 次阅读


1 Node 类型:属性有:nodeType, nodeValue ,nodeName节点类型,值、名;
childNodes,其中保存着NodeList对象,NodeList对象是一种数组对象,用来保存一组有序节点,可用方括号访问。(childNodes[0] == firstChild)
parentNode,指向文档树的父节点
previousSibling,nextSibling属性,可以访问同一列表其它节点
ownerDocument:指向整个文档的文档节点
Node操作:var returnedNode = someNode.appendChild(newNode)//插入到最后一个元素
var returnedNode = someNode.insertBefore(newNode,null);//插入后成为最后一个节点
//insertBefore()方法接受两个参数,要插入的节点及作为参考的节点
var returnedNode = someNode.insertBefore(newNode,someNode.firstChild);//插入成为第一个子节点
var returnedNode = someNode.replaceChild(newNode , someNode.firstChild);//替换第一个子节点
var returnedNode = someNode.removeChild(someNode.firstChild);//移除第一个子节点
2 Document 类型:document对象是HTMLDocument(继承自Document类型)的一个实例,表整个HTML页面
Document节点的子节点:DocumentType,Element,Processing,Instruction,Comment
访问子节点属性:documentElement属性,指向html页面中<html>元素
body属性,指向<body>元素
doctype属性,对<!DOCTYPE>调用
文档信息:document对象有些标准Document对象所没有的属性,有:
title属性,指向<title>
URL属性,指向页面链接完整的URL,
domain属性,页面域名
referrer属性,链接到当前页面的URL,
查找元素:getElementById(),
getElementsByTagName('img') //接受一个参数,返回包含0个或多个元素的NodeList,而在html里,会返回一个HtmlCollection对象。(HtmlCollection对象的方法:namedItem(),可以通过元素的name特性取得集合的项)
getElementsByName()// 只有HTMLDocument类型才有的方法,返回带有给定name特性的所有元素。
3 Element类型 :节点的nodeName等于tagNamejstree kb案例.note
父节点是Element或Document,
HTML元素是由HTMLElement或者更具体的子类表示:
属性:id ,className, title,textContent
html 元素:button,form,body,input等
特性操作
<div id="myDiv"> </div>
var div = document.getElementById('myDiv");
取得特性:alert(div.getAttribute("id")); //id,class CSS类,title附加说明信息,lang,dir语言方向
设置特性:div.setAttribute("id","someOtherId");
删除特性:div.removeAttribute("id");
attributes属性:Element是使用attributes属性唯一一个DOM节点类型,
attributes属性包含一个NameNodeMap对象,该对象有如下方法:
getNamedItem(name):返回nodeName属性等于name的节点,可写成[name]
removeNamedItem(name):移除nodeName属性等于name的节点,相当于removeAttribute()
setNamedItem(node):向列表添加节点
item(pos)返回位于pos位置处的节点
attributes属性包含一系列节点,每个节点的nodeName就是特性的名称,节点的nodeValue就是特性的值,length为节点元素长度
比如 var id = element.attributes.getNamedItem( "id“).nodeValue;
创建元素:var div = document.createElement("div");
4 Text类型: 纯文本内容,可包含转义后html字符,不含html代码。
Text节点parentNode是一个Element,
创建文本节点:document.createTextNode(”<strong> Hello </strong>“)
例:var element = document.createElement("div");//创建元素
element.className = "message";//Element属性
var textNode = document.createTextNode("hello world");//创建Text类型
element.appendChild(textNode);//插入到div中
document.body.appendChild(element);//将div插入到body中
5 Comment类型 :注释,parentNode是一个Element或Document


凡心所向,素履所往