js中获取dom的方法

JS动态创建DOM元素的⽅法

本⽂实例讲述了JS动态创建DOM元素的⽅法。分享给⼤家供⼤家参考。具体如下：

近⽇，因⼯作需要，需要通过点击某个元素后， 动态创建⼀个DOM元素并显⽰，因此写了⼀些相关的JS函数，在此记录，以作备忘：

/*

动态创建DOM元素的相关函数⽀持

*/

/*

获取以某个元素的DOM对象

@obj 该元素的ID字符串

*/

function getElement(obj)

{

return typeof obj=='string'?document.getElementById(obj):obj;

}

/*

获取某个元素的位置

@obj 该元素的DOM对象，或该元素的ID

*/

function getObjectPosition(obj)

{

obj=typeof obj==='string'?getElement(obj):obj;

if(!obj)

{

return;

}

var position='';

if(obj.getBoundingClientRect) //For IEs

{

position=obj.getBoundingClientRect();

return {x:position.left,y:position.top};

}

else if(document.getBoxObjectFor)

{

position=document.getBoxObjectFor(obj);

return {x:position.x,y:position.y};

}

else

{

position={x:obj.offsetLeft,y:obj.offsetTop};

var parent=obj.offsetParent;

while(parent)

{

position.x+=obj.offsetLeft;

position.y+=obj.offsetTop;

parent=obj.offsetParent;

原生JS获取DOM元素的8种方法

一、getElementById(方法

getElementById(方法是原生JavaScript中最常用的获取DOM元素的方法之一、它接收一个参数，即元素的id属性值，并返回对应的DOM元素。如果没有找到匹配的元素，则返回null。

示例代码：

```javascript

var element = document.getElementById("myElement");

```

二、getElementsByTagName(方法

示例代码：

```javascript

var elements = document.getElementsByTagName("div");

```

三、getElementsByClassName(方法

getElementsByClassName(方法返回一个包含指定类名的元素集合。它接收一个参数，即需要获取的类名，并返回一个HTMLCollection对象，其中包含所有匹配的元素。

示例代码：

```javascript var elements = document.getElementsByClassName("myClass");

```

四、querySelector(方法

querySelector(方法返回第一个匹配指定选择器的元素。它接收一个参数，即需要获取的选择器，并返回匹配的元素。如果没有找到匹配的元素，则返回null。

示例代码：

```javascript

var element = document.querySelector("#myElement

div.myClass");

```

五、querySelectorAll(方法

querySelectorAll(方法返回所有匹配指定选择器的元素。它接收一个参数，即需要获取的选择器，并返回一个NodeList对象，其中包含所有匹配的元素。

示例代码：

JS获取DOM元素的八种方法

1. getElementById

这是最基本、最常用的方法之一，可以通过元素的id属性获取对应的DOM元素。

```javascript

let element = document.getElementById("elementId");

```

2. getElementsByClassName

可以通过元素的class属性获取对应的DOM元素，返回的是一个类数组对象。

```javascript

let elements = document.getElementsByClassName("className");

```

3. getElementsByTagName

```javascript

let elements = document.getElementsByTagName("tagName");

```

4. getElementsByName 可以通过元素的name属性获取对应的DOM元素，同样返回一个类数组对象。

```javascript

let elements = document.getElementsByName("elementName");

```

5. querySelector

可以使用CSS选择器来获取DOM元素，返回符合选择器的第一个元素。

```javascript

let element = document.querySelector("selector");

```

6. querySelectorAll

同样可以使用CSS选择器来获取DOM元素，返回所有符合选择器的元素。

```javascript

let elements = document.querySelectorAll("selector");

```

7. parentNode属性

可以通过父节点的属性来获取子节点的DOM元素。

```javascript let parentElement = document.getElementById("parentId");

js删除dom节点的方法

### JavaScript 删除DOM节点的方法

在Web开发中，动态地添加或删除页面元素是常见的需求，JavaScript提供了多种方法来操作DOM（文档对象模型），从而实现这一目的。本文将详细介绍使用JavaScript删除DOM节点的几种常见方法。

#### 1.`removeChild`方法

这是删除DOM节点的标准方法。要使用`removeChild`方法，首先需要获得要删除元素的父元素。

```javascript

// 假设要删除的元素ID是"myElement"

var parentElement = document.getElementById("parentElement");

var childElement = document.getElementById("myElement");

parentElement.removeChild(childElement);

```

#### 2.`parentNode.removeChild`方法

如果已经拥有要删除的元素，也可以直接使用该元素的`parentNode`属性。

```javascript

// 假设要删除的元素已经是一个DOM对象

var childElement = document.getElementById("myElement");

childElement.parentNode.removeChild(childElement); ```

#### 3.`innerHTML`属性

如果只是想快速删除某个元素，也可以通过将父元素的`innerHTML`设置为空字符串来实现。

```javascript

// 假设要删除的元素在"myDiv"中

var myDiv = document.getElementById("myDiv");

myDiv.innerHTML = "";