> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/js/webjs/dom.md).

# DOM Control

### Selecting

* Can put any selector in string for jsss

```javascript
document.getElementById().getElementByTagname("input")
document.querySelector('.class')//return first
document.querySelectorAll('.class')//return NodeList(not array so no forEach?)
```

#### Modifying Elements

Can retrieve or set any attribute

```javascript
document.getElementById("myname").type="radio"
document.getElementById("myname").value="Jorge"
elem.style.display = 'none';
```

#### Creating Elements

```javascript
const container = document.createElement("div");
container.setAttribute("id", containerId);
document.body.appendChild(container);
```

#### Deleting Elements

```javascript
const container = document.getElementById(containerId);
if (container === null) return;
container.parentNode.removeChild(container);
```

## Other DOM Stuff

#### URL

```javascript
window.location.href //full url
window.location.reload()
```

#### Scrolling

```markup
window.scrollBy(x-coord, y-coord);
window.scrollBy(options)
```

Options is a dict of

* `top` i,e `y-coord`
* `left` i.e `x-coord`
* `behavior` =  `smooth`| `instant`| `auto`

#### Get Forms

```javascript
document.forms
document.forms.myform
document.theform([name of form])
```

#### JQuery

```javascript
$( '#header' ); // select the element with an ID of 'header'
$( 'li' );      // select all list items on the page
$( 'ul li' );   // select list items that are in unordered lists
$( '.person' ); // select all elements with a class of 'person'
```