WEB安全——HTML DOM树

1.介绍

1.1 DOM 解释


说明:DOM全称 Document Object Model,即文档对象模型。将文档抽象成一个树型结构,文档中的标签、标


1.2 DOM 分类


按照操作对象的不同,可分为Core DOM、XML DOM 和 HTML DOM。


Core Dom:核心Dom,针对任何结构化文档的标准模型。 XML DOM:用于XML文档的标准模型,对XML元素进行操作。 HTML DOM:用于HTML文档的标准模型,对HTML元素进行操作。 1.3 DOM 功能


1、查询某个元素


2、查询某个元素的祖先、兄弟以及后代元素


3、获取、修改元素的属性


4、获取、修改元素的内容


5、创建、插入和删除元素


2. DOM 节点


文档中的所有内容都可表示为一个节点(node),如:HTML里整个文档、每个标签、每个标签的属性和文本都可作


2.1 节点分类


1、文档节点(Document):整个XML、HTML文档


2、元素节点(Element):每个XML、HTML元素


3、属性节点(Attr):每个XML、HTML元素的属性


4、文本节点(Text):每个XML、HTML元素内的文本


5、注释节点(Comment):每个注释


注意:这里的Document节点为总称,具体可分为XMLDocument和HTMLDocument,同理Element也可分为XM


2.2 HTML DOM 节点层次


节点彼此都有等级关系:父节点、兄弟节点、子节点等等。




3、获取 HTML 元素节点方法


文档节点(document)、元素节点可以通过getElementById、getElementsByName、getElementsByClassName



4、常用DOM操作


js操作dom节点


1.访问节点


document.getElementById(id);返回对拥有指定id的第一个对象进行访问document.getElementsByName(name


返回带有指定标签名的对象集合


注意:Elements


document.getElementsByClassName(classname);


返回带有指定class名称的对象集合


注意:Elements


2.生成节点


document.createElement(eName);创建一个节点document.createAttribute(attrName);对某个节点创建属性do


3.添加节点


document.insertBefore(newNode,referenceChild);


在某个节点前插入节点


parentNode.appendChild(newNode);


给某个节点添加子节点


4.复制节点cloneNode(true | false);


复制某个节点


参数:是否复制原节点的所有属性


5.删除节点


parentNode.removeChild(node)


删除某个节点的子节点


node是要删除的节点

注意:IE会忽略节点间生成的空白文本节点(例如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会


元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点 Internet Explorer 和 Mozilla 得到正确的方法。


6.修改文本节点appendData(data);


将data加到文本节点后面


deleteData(start,length);


将从start处删除length个字符


insertData(start,data)


在start处插入字符,start的开始值是0;


replaceData(start,length,data)


在start处用data替换length个字符


splitData(offset)


在offset处分割文本节点


substringData(start,length)


从start处提取length个字符


7.属性操作getAttribute(name)


通过属性名称获取某个节点属性的值


setAttribute(name,value);


修改某个节点属性的值


removeAttribute(name)


删除某个属性


< head> HTML DOM < /head>< body onload="Load_message();"> < /body>< /html>


8.查找节点parentObj.firstChild如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使


9.获取相邻的节点neborNode.previousSibling :获取已知节点的相邻的上一个节点nerbourNode.nextSlbling:


获取已知节点的下一个节点


10.获取父节点childNode.parentNode:得到已知节点的父节点


11替换节点方法replace(new,old)


< head> HTML DOM < /head>< body on-load="replaceMessage();">

hello world!

< /body>< /html>

你可能感兴趣的:(WEB安全——HTML DOM树)