下载文档原格式
HTMLDOM对象的属性和⽅法介绍HTML DOM对象的属性和⽅法介绍DOM 是 Document Object Model（⽂档对象模型）的缩写。
DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API（应⽤程序编程接⼝），它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。
W3C DOM 标准被分为 3 个不同的部分：核⼼ DOM - 针对任何结构化⽂档的标准模型XML DOM - 针对 XML ⽂档的标准模型HTML DOM - 针对 HTML ⽂档的标准模型HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。
HTML DOM 对象有⼏种类型：1.Document 类型在浏览器中，Document 对象表⽰整个 HTML ⽂档。
1.1属性引⽤⽂档的⼦节点documentElementvar html = document.documentElement; //取得对<html>元素的引⽤bodyvar body = document.body; //取得对<body>元素的引⽤获取⽂档信息title通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。
var originalTitle = document.title; //返回当前⽂档的标题document.title = "New title"; //修改当前⽂档的标题URL该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。
⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：/cqhaibin/p/6291640.html这些信息就是当前⽂档完整的 URL。
var url = document.URL;//返回当前⽂档完整的URLdomain该属性返回当前⽂档的服务器域名。
DOM元素对象的属性⽅法在 HTML DOM （⽂档对象模型）中，每个部分都是节点。
节点是DOM结构中最基本的组成单元，每⼀个HTML标签都是DOM结构的节点。
⽂档是⼀个⽂档节点。
所有的HTML元素都是元素节点 所有 HTML 属性都是属性节点 ⽂本插⼊到 HTML 元素是⽂本节点 注释是注释节点。
最基本的节点类型是Node类型，其他所有类型都继承⾃Node，DOM操作往往是js中开销最⼤的部分，因⽽NodeList导致的问题最多。
要注意：NodeList是‘动态的’，也就是说，每次访问NodeList对象，都会运⾏⼀次查询，虽然这样增加了开销，但可以保证我们新添加的节点都能在NodeList中访问的到。
所有的元素节点都有共⽤的属性和⽅法，让我们来详细看⼀看：先来看较为常⽤的通⽤属性1 element.id 设置或返回元素的 id。
2 element.innerHTML 设置或者返回元素的内容，可包含节点中的⼦标签以及内容3 element.innerText 设置或者返回元素的内容，不包含节点中的⼦标签以及内容4 element.className 设置或者返回元素的类名5 element.nodeName 返回该节点的⼤写字母标签名6 element.nodeType 返回该结点的节点类型，1表⽰元素节点 2表⽰属性节点……7 element.nodeValue 返回该节点的value值，元素节点的该值为null8 element.childNodes 返回元素的⼦节点的nodeslist对象，nodelist类似于数组，有length属性，可以使⽤⽅括号 [index] 访问指定索引的值(也可 以使⽤item(index)⽅法)。
但nodelist并不是数组。
9 element.firstChild/stChild 返回元素的第⼀个/最后⼀个⼦节点(包含注释节点和⽂本节点)10 element.parentNode 返回该结点的⽗节点11 element.previousSibling 返回与当前节点同级的上⼀个节点(包含注释节点和⽂本节点)12 element.nextSibling 返回与当前节点同级的下⼀个节点(包含注释节点和⽂本节点)13 element.chileElementCount : 返回⼦元素(不包括⽂本节点以及注释节点)的个数14 element.firstElementChild /lastElementChild 返回第⼀个/最后⼀个⼦元素(不包括⽂本节点以及注释节点)15 element.previousElementSibling/nextElementSibling 返回前⼀个/后⼀个兄弟元素(不包括⽂本节点以及注释节点)16 element.clientHeight/clientWidth 返回内容的可视⾼度/宽度（不包括边框，边距或滚动条）17 element.offsetHeight/offsetWidth /offsetLeft/offsetTop 返回元素的⾼度/宽度/相对于⽗元素的左偏移/右偏移(包括边框和填充,不包括边距)18 element.scrollHeight/scrollWidth/scrollLeft/scrollTop返回整个元素的⾼度（包括带滚动条的隐蔽的地⽅）/宽度/返回当前视图中的实际元素的左边缘和左边缘之间的距离/上边缘的距离19 element.style 设置或返回元素的样式属性,。
原生dom操作方法原生DOM操作是指使用JavaScript中的原生方法和属性来操作HTML文档中的元素。
DOM（文档对象模型）是浏览器将HTML文档解析成一个树状结构，通过DOM可以对这个树状结构进行访问和操作。
在使用原生DOM操作之前，我们首先需要获取到HTML文档中的元素。
有多种方式可以获取元素，最常用的是使用getElementById、getElementsByClassName和getElementsByTagName等方法。
这些方法可以通过元素的id、类名和标签名来获取相应的元素。
获取元素后，我们就可以对其进行一系列的操作。
一、属性操作1. 获取和设置属性可以使用getAttribute和setAttribute方法来获取和设置元素的属性。
获取元素属性var value = element.getAttribute('attributeName');设置元素属性element.setAttribute('attributeName', value);2. 获取和设置属性值可以通过直接获取和设置元素的属性值来操作元素的属性。
获取元素属性值var value = element.attributeName;设置元素属性值element.attributeName = value;3. 操作样式可以获取和设置元素的样式类名、内联样式和计算样式等。
通过classList属性可以操作元素的样式类名。
添加样式类element.classList.add('className');删除样式类element.classList.remove('className');切换样式类element.classList.toggle('className');检查是否包含样式类element.classList.contains('className');通过style属性可以操作元素的内联样式。
dom对象常⽤的属性和⽅法有哪些？dom对象常⽤的属性和⽅法有哪些？⼀、总结⼀句话总结：1、document属性和⽅法：document的属性有head，body之类，⽅法有各种获取element的⽅法2、element的属性和⽅法：属性⽐如style，innerHTML和固有属性，⽅法⽐如各种动态操作元素，⽐如createElement，还有操作属性的set、get、remove、create解Attribute3、attribute的属性和⽅法：有点包含在element⾥⾯的感觉1、我们熟知location是window的属性或者说对象，那么document对象有location属性么？解答：window有location对象，document同样有location对象，2、如何获取⼀个html的⽂档声明？解答：document.doctype;//可以知道⽂档声明，如果没有return null;这⾥是<!DOCTYPE html>3、⼀个有如下 <!DOCTYPE html>⽂档声明的html⽂档，它的⽂档声明的名字是什么？解答：html4、如何获取⼀个html的head部分？解答：document.head//很明显选取head节点.就是<head></head>这段5、如何获取⼀个html的body部分？解答：document.body//选取body节点.6、如何获取⼀个⽂档的⽂档声明的名字？解答：//知道⽂档声明的名字.7、document的location属性是来⼲嘛的？解答：ocation⼀般主要是⽤来获取地址。
8、如何获取⼀个⽂档当前的地址？解答：document.location.href//获取当前地址9、给⽂档重新分配地址的三种⽅法是哪三种？10、innerText和innerHTML的区别是什么（两点区别）？解答：⼀个是获取⽂本，⼀个是获取标签。
JS操作DOM元素属性和方法JavaScript是一种强大的脚本语言，它可以通过操作DOM（Document Object Model）来改变网页的结构和内容。
在JavaScript中，我们可以使用一些属性和方法来操作DOM元素。
1.获取DOM元素在JavaScript中，我们可以使用getElementById、getElementsByClassName、getElementsByTagName等方法来获取DOM元素。
这些方法返回一个NodeList对象，通过索引来访问其中的元素。
2.修改DOM元素的属性通过JavaScript，我们可以修改DOM元素的属性。
比如，使用setAttribute方法可以设置元素的属性值，使用getAttribute方法可以获取元素的属性值。
3.修改DOM元素的样式JavaScript也可以修改DOM元素的样式。
通过style属性，我们可以修改元素的样式属性，比如颜色、字体大小、背景颜色等。
4.添加和删除DOM元素使用JavaScript，我们可以动态地添加和删除DOM元素。
createElement方法用于创建新的元素节点，而appendChild方法则可以将新的元素节点插入到指定的父元素中。
另外，removeChild方法可以删除指定的子元素。
5.修改DOM元素的内容JavaScript可以通过innerHTML属性来修改DOM元素的内容。
可以直接将HTML代码或文本赋值给innerHTML属性，从而改变元素的显示内容。
6.绑定事件处理程序通过JavaScript，我们可以为DOM元素绑定事件处理程序。
可以通过addEventListener方法来监听元素的事件，比如点击事件、鼠标移动事件等。
当事件触发时，会执行对应的处理函数。
7.访问和修改DOM元素的子节点通过childNodes属性，我们可以访问DOM元素的子节点。
childNodes返回一个数组，包含元素的所有子节点。
DOM的官方定义DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准，就是操作网页的标准。
而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类●核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
●HTMLDOM：针对HTML文档，提供的专有的属性和方法。
●XMLDOM：针对XML文档，提供的专有的属性和方法。
●EventDOM：事件DOM，提供了很多的常用事件。
●CSSDOM：提供了操作CSS的一个接口。
HTML节点树DOM中节点的类型：●document文档节点：代表整个网页，document文档节点不对应标记。
是访问文档中各元素的起点。
●element元素节点：元素节点对应于网页中的各标记。
●attribute属性节点：每个元素都有若干个属性。
●text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法●nodeName：节点名称。
●nodeV alue：节点的值。
●firstChild：第一个子节点。
●lastChild：最后一个子节点。
●parentNode：父节点。
●childNodes：子节点列表，是一个数组。
节点访问为什么，document.firstChild找到的不是HTML节点呢？DOM是针对HTML4.01开发的。
我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
为什么，node_body.firstChild找不到table节点？在Firefox下，会把空格或换行，当成一个文本节点。
因此，所有标记之间的空格和换行，都去掉。
查找html节点的方法●document.firstChild●document.documentElement(兼容性较好)查找body节点的方法●stChild●document.body(推荐使用)节点属性1、getAttribute()——获取属性的值●描述：获取节点属性的值。
dom基本概念DOM基本概念DOM（Document Object Model）是一种用于处理HTML和XML文档的编程接口。
它将文档表示为一个树形结构，其中每个节点都是一个对象，每个对象都有其自身的属性和方法。
DOM的基本概念包括节点、元素、属性、文本、注释、文档对象等。
节点节点是DOM中最基本的单位，它可以是元素、属性、文本、注释等。
每个节点都有其自身的类型、名称、值等属性。
节点之间可以存在父子关系、兄弟关系等。
在DOM中，节点可以通过节点类型来进行分类，例如元素节点、属性节点、文本节点等。
元素元素是DOM中的一种节点类型，它表示HTML或XML文档中的标签。
每个元素都有其自身的标签名、属性、子元素等。
在DOM中，元素节点可以通过标签名来进行访问，例如document.getElementsByTagName()方法可以获取文档中指定标签名的所有元素。
属性属性是DOM中的一种节点类型，它表示HTML或XML文档中的属性。
每个属性都有其自身的名称和值。
在DOM中，属性节点可以通过元素节点来进行访问，例如element.getAttribute()方法可以获取元素节点的指定属性值。
文本文本是DOM中的一种节点类型，它表示HTML或XML文档中的文本内容。
每个文本节点都有其自身的文本值。
在DOM中，文本节点可以通过元素节点来进行访问，例如element.firstChild.nodeValue 可以获取元素节点的文本内容。
注释注释是DOM中的一种节点类型，它表示HTML或XML文档中的注释内容。
每个注释节点都有其自身的注释值。
在DOM中，注释节点可以通过元素节点来进行访问，例如element.childNodes可以获取元素节点的所有子节点，其中包括注释节点。
文档对象文档对象是DOM中的一种节点类型，它表示整个HTML或XML文档。
文档对象是DOM树的根节点，它包含了整个文档的所有元素、属性、文本、注释等节点。
dom常见的操作方法DOM是指文档对象模型（Document Object Model），它可以将文档（HTML、XML）表示为一个具有层次结构的树形结构。
在JavaScript 中，通过操作DOM，我们可以实现对网页元素的增删改查等操作。
下面是DOM的常见操作方法：一、查询元素1.通过元素的id查询：document.getElementById('id')2.通过元素的类名查询：document.getElementsByClassName('class')3.通过元素的标签名查询：document.getElementsByTagName('tag')4.通过选择器查询：document.querySelector('selector')或document.querySelectorAll('selector')，其中querySelector返回匹配的第一个元素，querySelectorAll返回匹配的所有元素。
二、创建元素1.创建元素：document.createElement('tag')2.创建文本节点：document.createTextNode('text')3.将文本节点添加到元素中：element.appendChild(textNode)三、操作元素属性1.获取元素属性值：element.getAttribute('attribute')2.设置元素属性值：element.setAttribute('attribute', 'value')四、操作元素样式1.获取元素样式值：element.style.property2.设置元素样式值：element.style.property = 'value'五、操作元素内容1.获取元素内容：element.innerHTML2.设置元素内容：element.innerHTML = 'content'3.获取元素文本内容：element.innerText六、操作元素位置1.获取元素相对于文档的位置：element.getBoundingClientRect()2.获取元素的父节点：element.parentNode3.插入元素到指定位置：parentElement.insertBefore(newElement, targetElement)七、操作元素事件1.添加事件监听器：element.addEventListener('event',function(){})2.移除事件监听器：element.removeEventListener('event', function(){})总结：DOM操作是JavaScript中的重要部分，在前端开发中经常需要对网页元素进行增删改查等操作。
BOM 浏览器对象模型注:DOM 文档对象模型从上图的document开始Window 对象:a.Window 对象是JavaScript 层级中的顶层对象,是一个全局对象。
b.Window 对象代表一个浏览器窗口或一个框架。
c.Window 对象会在<body> 或<frameset> 每次出现时被自动创建。
Wind ow 对象的属性Wind ow 对象的方法Eg.新的顶层浏览器窗口由方法 Window.open() 创建。
当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。
新窗口的 opener 属性反过来引用了打开它的那个窗口。
Document 对象Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。
Document 对象是Window 对象的一个部分，可通过window.document 属性来访问。
Document 对象的集合Document 对象的属性Document 对象的方法Form 对象的集合Form 对象代表一个HTML 表单。
在HTML 文档中<form> 每出现一次，Form 对象就会被创建。
Form 对象的集合集合描述IE F O W3Celements[]包含表单中所有元素的数组。
519YesForm 对象的属性Standard PropertiesForm 对象的方法Action+submit():可以做动态提交(提交的按钮必须是button,不能是submit)Form 对象的事件句柄Text 对象Text 对象代表HTML 表单中的文本输入域。
在HTML 表单中<input type="text"> 每出现一次，Text 对象就会被创建。
该元素可创建一个单行的文本输入字段。
当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发onchange 事件句柄。
您可以通过表单的elements[] 数组来访问文本输入域，或者通过使用document.getElementById()。
Text对象的属性(密码框相同,textArea多了cols,rows)Standard PropertiesText Object MethodsSelect 对象Select 对象代表HTML 表单中的一个下拉列表。
在HTML 表单中，<select> 标签每出现一次，一个Select 对象就会被创建。
您可通过遍历表单的elements[] 数组来访问某个Select 对象，或者通过使用document.getElementById()。
Sel ect 对象的集合集合描述IE F O W3Coptions[]返回包含下拉列表中的所有选项的一个数组。
419YesSel ect 对象的属性Standard PropertiesSel ect 对象的方法Sel ect 对象的事件句柄Option 对象Option 对象代表HTML 表单中下拉列表中的一个选项。
在HTML 表单中<option> 标签每出现一次，一个Option 对象就会被创建。
您可通过表单的elements[] 数组访问一个Option 对象，或者通过使用document.getElementById()。
Option 对象的属性Standard PropertiesCheckbox 对象(Radio对象一样)Checkbox 对象代表一个HTML 表单中的一个选择框。
在HTML 文档中<input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。
您可以通过遍历表单的elements[] 数组来访问某个选择框，或者通过使用document.getElementById()Checkbox 对象的属性Standard PropertiesCheckbox 对象的方法Button 对象Button 对象的属性Standard PropertiesButton 对象的方法Submit 对象Submit 对象代表HTML 表单中的一个提交按钮(submit button)。
在HTML 表单中<input type="submit"> 标签每出现一次，一个Submit 对象就会被创建。
在表单提交之前，触发onclick 事件句柄，并且一个句柄可以通过返回fasle 来取消表单提交Submit 对象的属性Standard PropertiesSubmit 对象的方法Reset 对象Reset 对象代表HTML 表单中的一个重置按钮。
在HTML 表单中<input type="reset"> 标签每出现一次，一个Reset 对象就会被创建。
当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。
默认值由HTML value 属性或JavaScript 的defaultValue 属性指定。
重置按钮在重置表单之前触发onclick 句柄，并且这个句柄可以通过返回fasle 来取消。
参阅Form.reset() 方法和Form.onreset事件句柄。
Reset 对象的属性Standard PropertiesReset 对象的方法Styl e 对象Style 对象代表一个单独的样式声明。
可从应用样式的文档或元素访问Style 对象。
使用Style 对象属性的语法：document.getElementById("id").style.property="值"Style 对象的属性：∙背景∙边框和边距∙布局∙列表∙杂项∙定位∙打印∙滚动条∙表格∙文本∙规范Background 属性Border 和Margin 属性Layout 属性List 属性Positioning 属性Printing 属性Scrollbar 属性(IE-only)Table 属性Text 属性Standard 属性其他属性cssText 属性它是一组样式属性及其值的文本表示。
这个文本格式化为一个CSS 样式表，去掉了包围属性和值的元素选择器的花括号。
将这一属性设置为非法的值将会抛出一个代码为SYNTAX_ERR 的DOMException 异常。
当CSS2Properties 对象是只读的时候，试图设置这一属性将会抛出一个代码为NO_MODIFICATION_ALLOWED_ERR 的DOMException 异常。
关于CSS2Properties 对象CSS2Properties 对象表示一组CSS 样式属性及其值。
它为CSS 规范所定义的每一个CSS 属性都定义了JavaScript 属性。
一个HTMLElement 的style 属性是一个可读可写的CSS2PropertiesTable 对象Table 对象代表一个HTML 表格。
在HTML 文档中<table> 标签每出现一次，一个Table 对象就会被创建。
Table 对象的集合Table 对象的属性Standard PropertiesTable 对象的方法TableRow 对象TableRow 对象代表一个 HTML 表格行。
在 HTML 文档中 <tr> 标签每出现一次，一个 TableRow 对象就会被创建。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet 标准).TableRow 对象的集合集合描述IE F O W3Ccells[]返回包含行中所有单元格的一个数组。
419YesTableRow 对象的属性TableRow 对象的方法TableRow 对象代表一个HTML 表格行。
在HTML 文档中<tr> 标签每出现一次，一个TableRow 对象就会被创建。
TableCell 对象的属性TableCell 对象代表一个HTML 表格单元格。
在一个HTML 文档中<td> 标签每出现一次，一个TableCell 对象就会被创建。
FileUpload 对象在HTML 文档中<input type="file"> 标签每出现一次，一个FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的value 属性保存了用户指定的文件的名称，但是当包含一个file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
为安全起见，file-upload 元素不允许HTML 作者或JavaScript 程序员指定一个默认的文件名。
HTML value 属性被忽略，并且对于此类元素来说，value 属性是只读的，这意味着只有用户可以输入一个文件名。
当用户选择或编辑一个文件名，file-upload 元素触发onchange 事件句柄。
FileUpload 对象的属性FileUpload 对象的方法Screen 对象Screen 对象实际上是 JavaScript 对象，而不是 HTML DOM 对象。
Screen 对象是由JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。
每个 Window 对象的 screen 属性都引用一个 Screen 对象。
Screen 对象中存放着有关显示浏览器屏幕的信息。
JavaScript 程序将利用这些信息来优化它们的输出，以达到用户的显示要求。
例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。
另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。
Screen 对象的属性Frameset 对象Frameset 对象代表一个 HTML 框架集。
Frameset 对象的属性标准属性Anchor 对象Anchor 对象代表一个HTML 超链接。
在HTML 文档中<a> 标签每出现一次，Anchor 对象就会被创建。
锚可用于创建到另一个文档的链接（通过href 属性），或者创建文档内的书签。
您可以通过搜索Document 对象中的anchors[] 数组来访问某个锚，或者使用document.getElementById() 。
