js에서 호스트 객체 구문 분석-JS 튜토리얼-php.cn

이 기사에서는 특정 참조 값을 갖는 js의 호스트 개체 분석을 주로 소개합니다. 이제 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

호스트 개체는 주로 DOM 개체 및 BOM을 포함하여 브라우저에서 제공하는 개체입니다. 물체.

1. DOM의 기원

　1.SGML, XML 및

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">SGML(标准通用标记语言)是定义使用标签来表示数据的标记语言的语法。<br>　　- 标签由一个小于号和一个大于号之间的文本组成，如<title><br>　　- 标签分为起始标签和结束标签，分别表示一个特定区域的开始和这个特定区域的结束，如<title>标题</title><br>　　- 特性是定义在起始标签内的值。如<img src="pircutre.jpg">，src就是其特性<br>HTML遵循SGML标记语言的语法,它是的SGML一种应用。或者说，SGML用来定义HTML的文档类型定义(DTD)。SGML还用来编写XML的DTD。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

로그인 후 복사

　5. 노드 특성 및 방법

<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">XML对SGML的语法做了更细致和严谨的扩展。<br>　　- SGML的奇怪语法:<br>　　　　- 某些标签不语序出现结束标签，如HTML中的<img>标签，否则会出现错误。<br>　　　　- 某些标签的结束标签可以不写，如HTML中的<p>标签。<br>　　　　- 标签可以以任何顺序嵌套，如<p><span></p></span>。<br>　　　　- 某些特性必须包含值，如<img src="picture.jpg">。<br>　　　　- 某些特性不要求一定有值，如<td nowrap>。<br>　　　　- 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。<br>　　- XML去掉了许多SGML中的随意语法，并且规定了新的语法:<br>　　　　- 任何的起始标签都必须有一个结束标签。<br>　　　　- 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。<br>　　　　- 标签必须按合适的顺序嵌套。就近原则书写结束标签。<br>　　　　- 所有的特性都必须有值。<br>　　　　- 所有的特性都必须在值得周围加上双引号。<br>XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

로그인 후 복사

특성/방법

String nodeValue String nodeTypeNumberownerDocumentDocument childNodes NodeList firstChild 노드의 모든 하위 노드 목록 lastChild Nodehas ChildNodes() BooleanappendChild(node) 노드remo veChild(node) Node replacementChild(newnode,oldnode) 노드 childNodes의 refnode 앞에 newnode 삽입 이 노드가 첫 번째 형제 노드인 경우 값은 null은 이 노드가 마지막인 경우 다음 형제 노드를 가리킵니다. 형제 노드인 경우 값은 null 요소 노드에만 사용되는 요소의 특성을 나타내는 Attr 객체를 포함합니다

유형	Description	nodeName
노드 이름
node		의 값
노드의 상수 값 입력
노드가 속한 문서

하위 노드 목록의 첫 번째 노드
마지막 하위 노드 목록의 노드
하위 노드 포함 여부
추가 childNodes
delete node from childNodes
childNodes의 oldnode를 newnode	로 교체 insertBefore(newnode, refnode)	Node
	이전Sibling	Node
	입니다. nextSibling	Node
	attributes	NamedNodeMap
	6.HTML DOM <span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';">任何基于XML的语言，如XHTML和SVG，因为它们遵循XML语法，所以可以使用上述的Node接口操作。然而很多语言会继续定义它们自己的DOM来扩展XML以提供特定功能。<br>开发XML DOM的同时，W3C还一起开发了针对XHTML(以及HTML)的DOM。这个DOM定义了一个HTMLDocument一个HTMLElement作为实现基础。每个HTML元素通过它自己的HTMLElement类型表示，如HTMLpElement代表了<p>元素。但有少数的除外。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 로그인 후 복사 二、DOM通用节点对象操作　　1.DOM的通用属性 <span style="color: #808080;">alinkColor 激活的链接的颜色，如<body alink="color">定义的<br>bgColor 页面的背景颜色，如<body bgcolor="color">定义的<br>fgColor 页面的文本颜色，如<body text="color">定义的<br>lastModified 最后修改页面的日期，是字符串<br>linkColor 链接的颜色，如<body link="color">定义的<br>referrer 浏览器当前页后退一个位置的url<br>title <title>标签中显示的文本<br>URL 当前页面的url<br>vlinkColor 访问过的链接的颜色，如<body vlink="color">定义的<br>* 这些属性是引用了<body>标签中的旧HTML特性，应该用样式表代替它们。</span> 로그인 후 복사 　　2.DOM的通用集合 <span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">ahchors 页面中所有锚的集合(由<a name="ahchorname></a>标签表示)<br>applets 页面中所有applet的集合<br>embeds 页面中所有嵌入式对象的集合(由<embed>标签表示)<br>forms 页面中所有表单的集合<br>images 页面中所有图像的集合<br>links 页面中所有链接的集合(由<a href="somewhere.htm"><a>表示</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 로그인 후 복사 　　3.DOM通用节点操作 document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的表现形式，即它也是XML DOM Document对象。 로그인 후 복사 　　1查找节点 <span style="color: #808080;">document.getElementById() <span style="color: #808080; font-family: 'Menlo';"> 返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: 'Menlo';">的第一个对象的引用。<br><span style="color: #808080;">document.getElementsByName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定名称的对象集合。<br><span style="color: #808080;">document.getElementsByTagName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定标签名的对象集合。<br><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">document.getElementsByClassName() <span style="color: #808080; font-family: 'Menlo';">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 로그인 후 복사 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document操作元素</title></head><body> <p class="outer"> <p class="inner">第一段文本</p> <p class="inner">第二段文本</p> </p> <script> var op = document.getElementsByClassName("outer")[0].getElementsByClassName("inner")[0].innerHTML; </script></body></html> 로그인 후 복사 　　2创建节点 <span style="color: #808080;">document.createAttribute(name) 创建属性名为name的属性节点。<br/>document.createElement() 创建标签名为tagName的元素。<span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br/><span style="color: #808080;">document.createTextNode(text)　　　创建包含文本text的文本节点。<span style="color: #808080; font-family: 'Menlo';"><br/><span style="color: #808080;">* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。</span></span></span></span></span></span></span> 로그인 후 복사 　　3添加节点 <span style="color: #808080;">Element.appendChild(Node) 添加Node子元素。<br/>Element.insertBefore(newNode, oldNode) <span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">在某个子节点对象前添加新节点。</span></span></span></span></span></span></span></span> 로그인 후 복사 　　4删除节点 <span style="color: #808080;">Element.removeChild(Node) 删除Node子元素。</span> 로그인 후 복사 　　5替换节点 <span style="color: #808080;">Element.replacChild(newNode, oldNode) 替换子元素。</span> 로그인 후 복사 <span style="color: #808080;">document.getElementById() <span style="color: #808080; font-family: 'Menlo';"> 　返回对拥有指定<span style="color: #808080;"> id <span style="color: #808080; font-family: 'Menlo';">的第一个对象的引用。<br/><span style="color: #808080;">document.getElementsByName() 　<span style="color: #808080; font-family: 'Menlo';">返回带有指定名称的对象集合。<br/><span style="color: #808080;">document.getElementsByTagName() 　<span style="color: #808080; font-family: 'Menlo';">返回带有指定标签名的对象集合。<br/><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">document.getElementsByClassName() 　<span style="color: #808080; font-family: 'Menlo';">返回带有指定类名的对象集合。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 로그인 후 복사 　　6.节点属性和方法 <span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';">节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。</span></span></span></span></span></span></span></span> 로그인 후 복사 <span style="color: #808080;">Element.tagName　　　　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的标签名。　　</span><br/>Element.cloneNode()　　　　　　　　　复制当前元素。<br/>Element.normalize()　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">合并元素中相邻的文本节点，并移除空的文本节点。<br/></span>Element.parentNode　　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的父节点。<br/></span>Element.ownerDocument　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的根元素（文档对象）。</span><span style="color: #808080; font-family: 'Menlo';"><br/></span>nodelist.item()　　　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: 'Menlo';">中位于指定下标的节点。<br/><span style="color: #808080;">nodelist.length　　　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">返回<span style="color: #808080;"> NodeList <span style="color: #808080; font-family: 'Menlo';">中的节点数。</span></span></span></span></span></span></span><span style="color: #808080; font-family: 'Menlo';"><br/></span>Element.toString()　　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">把元素转换为字符串。</span></span> 로그인 후 복사 　　4.DOM通用属性操作　　1.查找属性 <span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;">Element.attributes<span style="color: #808080; font-family: 'Menlo';">　　　　　　　　　　</span></span></span></span></span></span></span>返回元素属性的<span style="color: #808080; font-family: 'Fira Code';"> NamedNodeMap<span style="color: #808080;">。</span></span><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br/></span></span></span></span>El</span></span></span></span></span></span>ement.hasAttribute() 　　　　　　 <span style="color: #808080; font-family: 'Menlo';">如果元素拥有指定属性，则返回<span style="color: #808080;">true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> false<span style="color: #808080; font-family: 'Menlo';">。<br/><span style="color: #808080;">Element.hasAttributes() 　　　　<span style="color: #808080; font-family: 'Menlo';">如果元素拥有属性，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> fals</span></span></span></span></span></span></span></span></span></span></span> 로그인 후 복사 　　2.获取属性 <span style="color: #808080;">Element.<span style="color: #808080;">getAttribute</span>() 　返回元素节点的指定属性值。<br/>Element.<span style="color: #808080;">getAttributeNode</span>()　　　　 <span style="color: #808080;">返回指定的属性节点</span>。</span> 로그인 후 복사 　　3.设置属性 <span style="color: #808080;"><span style="color: #808080;">Element.setAttribute() 　　　　　　 <span style="color: #808080; font-family: 'Menlo';">把指定属性设置或更改为指定值。<br/><span style="color: #808080;">Element.setAttributeNode() 　　　 <span style="color: #808080; font-family: 'Menlo';">设置或更改指定属性节点。</span></span></span></span></span> 로그인 후 복사 　　4.删除属性 <span style="color: #808080;"><span style="color: #808080;">Element.removeAttribute()　　　　　 <span style="color: #808080; font-family: 'Menlo';">从元素中移除指定属性。<br/><span style="color: #808080;">Element.removeAttributeNode()　　 <span style="color: #808080; font-family: 'Menlo';">移除指定的属性节点，并返回被移除的节点。</span></span></span></span></span> 로그인 후 복사 　　5.getattr和setattr获取或设置属性除了hasAttribute、getAttributes、setAttributes、removeAttribute操作属性，一些属性也可以通过节点.属性的方式获取/设置属性。 로그인 후 복사 <span style="color: #808080;">Element.id <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> id<span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br/></span></span></span></span></span></span></span>Element.style 　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> style <span style="color: #808080; font-family: 'Menlo';">属性。<br/><span style="color: #808080;">Element.innerHTML　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容。</span></span><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"> <br/></span></span></span></span></span></span></span>Element.className　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> class <span style="color: #808080; font-family: 'Menlo';">属性。<br/></span></span></span>Element.title 　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> title <span style="color: #808080; font-family: 'Menlo';">属性。<br/><span style="color: #808080;">Element.textContent　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回节点及其后代的文本内容。</span></span> <br/><span style="color: #808080;">Element.contentEditable 　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的文本方向。<br/></span></span></span></span></span>Element.dir　　　　　　　　　　　　 <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容是否可编辑。</span></span> <br/><span style="color: #808080;">Element.accessKey 　　　　　　 <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的快捷键。<br/></span>Element.lang 　　　　　　　　　<span style="color: #808080; font-family: 'Menlo';">设置或返回元素的语言代码。</span><span style="color: #808080; font-family: 'Menlo';"><br/></span>Element.namespaceURI 　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的<span style="color: #808080;"> namespace URI<span style="color: #808080; font-family: 'Menlo';">。<br/></span></span></span>Element.tabIndex 　　　　　　 <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的<span style="color: #808080;"> tab <span style="color: #808080; font-family: 'Menlo';">键控制次序。</span></span></span></span> 로그인 후 복사 <span style="color: #808080;">Element.clientHeight 　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的可见高度。<br/><span style="color: #808080;">Element.clientWidth 　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素的可见宽度。<span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><span style="color: #808080;"><span style="color: #808080; font-family: 'Menlo';"><br/><span style="color: #808080;">Element.offsetWidth <span style="color: #808080; font-family: 'Menlo';">　　　　　　　返回元素的宽度。<br/><span style="color: #808080;">Element.offsetLeft <span style="color: #808080; font-family: 'Menlo';">　　　　　　　返回元素的水平偏移位置。<br/><span style="color: #808080;">Element.offsetParent 　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素的偏移容器。<br/><span style="color: #808080;">Element.offsetTop 　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的垂直偏移位置。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>Element.scrollHeight 　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素的整体高度。<br/><span style="color: #808080;">Element.scrollLeft 　　　　　　　<span style="color: #808080; font-family: 'Menlo';">返回元素左边缘与视图之间的距离。<br/><span style="color: #808080;">Element.scrollTop 　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素上边缘与视图之间的距离。<br/><span style="color: #808080;">Element.scrollWidth 　　　　 <span style="color: #808080; font-family: 'Menlo';">返回元素的整体宽度。</span></span></span></span></span></span></span></span> 로그인 후 복사 　　6.检查元素 <span style="color: #808080;">Element.isContentEditable <span style="color: #808080; font-family: 'Menlo';">设置或返回元素的内容。<br/><span style="color: #808080;">Element.isDefaultNamespace() <span style="color: #808080; font-family: 'Menlo';">如果指定的<span style="color: #808080;"> namespaceURI <span style="color: #808080; font-family: 'Menlo';">是默认的，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">，否则返回<span style="color: #808080;"> false<span style="color: #808080; font-family: 'Menlo';">。<br/><span style="color: #808080;">Element.isEqualNode() <span style="color: #808080; font-family: 'Menlo';">检查两个元素是否相等。<br/><span style="color: #808080;">Element.isSameNode() <span style="color: #808080; font-family: 'Menlo';">检查两个元素是否是相同的节点。<br/><span style="color: #808080;">Element.compareDocumentPosition() <span style="color: #808080; font-family: 'Menlo';">比较两个元素的文档位置。<br/><span style="color: #808080;">Element.isSupported() <span style="color: #808080; font-family: 'Menlo';">如果元素支持指定特性，则返回<span style="color: #808080;"> true<span style="color: #808080; font-family: 'Menlo';">。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> 로그인 후 복사 以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！相关推荐： js中自定义对象的解析对js的内建对象的解析