DOM编程基础（JS）

一、DOM基本介绍

DOM：文档对象模型（Document Object Model）简称（DOM），是w3c组织推荐的处理可扩展标记语言（HTML 或XML）的标准接口

1、DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM 模型被结构化为对象树：

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的 HTML 元素
• 所有 HTML 元素的属性
• 访问所有 HTML 元素的方法
• 所有 HTML 元素的事件

文档：一个页面就是一个文档，DOM中使用document 表示。
网页：框架标记（frameset iframe）一个页面中包含了多个文档documen对象
元素：页面中所有的标签都是元素，DOM中使用element表示
节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
【ps】DOM把以上内容都看成对象

二、查找HTML DOM元素

HTML DOM能通过JS进行访问（也可以通过其他编程语言）。DOM中所有HTML元素都被定义为对象。我们通过JS对这些对象操作，改变HTML元素的内容。

1、getElementByID()

使用getElementByID()方法可以获取带有ID的元素对象

<script>
var mydiv=document.getElementById('mydiv');
console.log(mydiv);
</script>
<div id="mydiv">my id a nice man</div>

2、getElementByTagName()

使用getElementByTagname()方法可以返回带有指定标签名的对象集合。

document.getElementByTagname('标签名')

也可以获取（父元素）内部所有指定标签名的子元素。

dlement.getElementBytagName('标签名');
//[ps]父元素必须是单个对象（必须指明）。
//不会获取父元素

3、getElementByName()

getElementByName()方法可返回带有指定名称的对象的集合。

它查询的元素是name属性，返回的是数组，不是一个元素。

4、通过HTML5新增的方法获取

//根据类名返回元素对象集合
document.getElementsByClassName('类名');
//根据指定选择器返回第一个元素对象 里面的选择器需要加符号
document.querySelector('选择器');
//根据指定选择器返回
document.querySelectorAll('选择器');

5、获取元素

获取body元素

document.body

获取html元素

document.dovumentElement

三、改变HTML元素（内容）

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOm操作元素来改变元素李的内容、属性等操作。

element.innerHtml=new htmlcontent ：改变元素的HTML
element.innerTEXT=new text：改变元素的文本内容
element.attribute=new value：改变HTML元素的属性值
element.setAttribute(attribuute,value)：改变HTML元素的属性值
element.hasAttribute(attribute)：删除元素属性
element.removeAttribute(attribute)：删除元素属性
element.style.property=new style：改变html元素的样式

1、element.innerHTML

元素属性innerHtml就是元素的html代码，查找到元素后，可以对其innerHtml属性进行重新赋值修改。

<div>
	<h1>hello<h1>
</div>
<script>
	var h1=document.querySelector("div");
	h1.innerHTML="<h2>World</h2>";
</script>

2、element.innerText

<div>
	<h1>hello<h1>
</div>
<script>
	var h1=document.querySelector("div");
	//改变文本，html不解析，同时去空格、换行
	h1.innerText="<h2>World</h2>";
</script>

3、element.attribute 改变元素属性值

attribute 是代词，具体看元素属性。如a标签有href属性，可以使用element.gref来改变。

<div>
    <a href="https://www.4399.com">网址</a>
</div>

<script>
    var a = document.querySelector("a");
    a.href = "https://www.qq.com";
</script>

4 、element.setAttribute 改变元素属性值

还可以通过 element.setAttribute 方法来改变元素属性值

element.setAttribute(attribute, value)

attribute：属性名
value：属性值

<div>
    <a class="hightlight" href="https://www.4399.com">网址</a>
</div>
<script>
 var a = document.querySelector("a"); 
//更改属性
 a.setAttribute("href","https://www.qq.com");
    // 用className方法更改 class 属性使用 
    // 注意空格，这里是增加一个class
    a.className += " hidden";  
    // 用 setAttribute 更改 class 属性直接用 class
    // 也可写两个属性
    a.setAttribute("class", "hightlight hidden");
</script>

5、element.hasAttribute

通过element.hasAttribute判断是否有指定属性

<a href="www.baidu.com">bd</a>
<script>
var a=documnet.querySelector("a");
a.hasAttribute("href");//返回true
</script>

6、element.removeAttribute

<a date-index="1">123</a>
<script>
var a=documnet.querySelector("a");
a.removeAttribute("date-index");
//以上差不多
</script>

7、style.property 修改样式

使用元素中style 属性可以修改元素样式，修改的样式直接作用在css样式里

• 修改样式的属性名需要改写
• 属性值都是字符串，设置是必须包括单位

<div><a href="www.4399.com">网址</a></div>
<script>
var a =document.querySelector("a");
a.style.fontSize="30px";
</script>

下一章：DOM编程进阶（JS）