> For the complete documentation index, see [llms.txt](https://jonathan-zhang.gitbook.io/javascript-steppitguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jonathan-zhang.gitbook.io/javascript-steppitguide/ji-chu-zhi-shi/06/domjie-dian-cao-zuo.md).

# DOM节点操作

## DOM节点操作

* 获取DOM节点
* prototype,获取JS对象上的属性
* Attribute,获取DOM标签上的属性

## 获取DOM节点

```javascript
var div1 = document.getElementById('div1'); //元素
var divList = document.getElementByTagName('div'); //集合
console.log(divList.length);
console.log(divList[0]);
var containerList = document.getElementByClassName('.container'); //集合
var pList = document.querySelectorAll('p'); //集合
```

### property

```javascript
var pList = document.querySelectorAll('p');
var p = pList[0];
console.log(p.style.width); // 获取样式
p.style.width = '100px' // 修改样式
console.log(p.className);//获取class
p.className = 'p1' //修改class

// 获取 nodeName 和 ndoeType
console.log(p.nodeName);
console.log(p.nodeType);
```

### Attribute

```javascript
var pList = document.querySelectorAll('p');
var p = pList[0];
p.getAttribute('data-name');
p.getAttribute('data-name','imooc');
p.getAttribute('style');
p.setAttribute('style','font-size:30px;');
```