DOM编程基础（JS）

深碍√TFBOYSˉ_ 2024-03-25 10:14 120阅读 0赞

### 一、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的元素对象

#### 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）][DOM_JS]

[DOM_JS]: https://blog.csdn.net/weixin_74383330/article/details/129487948