dom 元素的定位、修改、创建、删除、指定位置插入等操作
dom
1// 获取id为myDiv的元素
2var myDiv = document.getElementById("myDiv");⭐️
3
4// 修改元素文本内容
5myDiv.innerHTML = "<p>Hello, DOM!</p>";
6
7// 创建新元素并添加到myDiv中
8var newElement = document.createElement("p");
9newElement.innerHTML = "This is a new paragraph.";
10myDiv.appendChild(newElement);
定位
以下是一些常用的getElementBy…()方法：
getElementById() - 通过元素ID获取某个元素节点
1var element = document.getElementById("myElementId");
getElementsByClassName() - 通过class名称获取一组元素节点
1var elements = document.getElementsByClassName("myClassName");
getElementsByTagName() - 通过标签名获取一组元素节点
1var elements = document.getElementsByTagName("div");
⭐️querySelector() - 通过CSS选择器查找第一个匹配的元素节点
1var element = document.querySelector(".myClass");
querySelectorAll() - 通过CSS选择器查找所有匹配的元素节点
1var elements = document.querySelectorAll("p.myClass");
这些方法可以帮助我们在页面中快速地获取需要操作的元素节点。它们在JavaScript编程中非常常见，掌握它们可以提高我们的开发效率。
获取内容
获取元素文本内容⭐️
1var element = document.getElementById("myElementId");
2var text = element.innerHTML;
获取元素属性值⭐️
1var image = document.getElementById("myImageId");
2var src = image.src;
修改操作
以下是一些常用的JavaScript操作HTML内容的代码示例：
修改元素文本内容 innerHTML⭐️
1var element = document.getElementById("myElementId");
2element.innerHTML = "Hello, World!";
修改元素属性值
1var image = document.getElementById("myImageId");
2image.src = "new-image.png";
3//oneliner
4document.getElementById("myImageId").setAttribute("src", "new-image.png");
删除元素的某个属性⭐️
1var image = document.getElementById("myImageId");
2image.removeAttribute("src");
设置元素的css
1var element = document.getElementById("myElementId");
2element.style.color = "red";
3element.style.fontSize = "20px";
4//onliner
5document.getElementById("myElementId").style.color = "red";
创建新元素并添加到成子节点⭐️
1var newElement = document.createElement("div");
2newElement.innerHTML = "This is a new element.";
3document.body.appendChild(newElement);
移除某个元素⭐️
1var elementToRemove = document.getElementById("removeMe");
2elementToRemove.parentNode.removeChild(elementToRemove);
insert Adjacent HTML⭐️
insertAdjacentHTML()方法可以在指定位置插入HTML代码。它接收两个参数，第一个参数是指定的位置，第二个参数是要插入的HTML代码。它有以下几个位置参数：
beforebegin - 在元素之前插入HTML代码
afterbegin - 在元素内部的开始位置插入HTML代码
beforeend - 在元素内部的结束位置插入HTML代码
afterend - 在元素之后插入HTML代码
1var element = document.getElementById("myElementId");
2element.insertAdjacentHTML("beforebegin", "<p>Hello, World!</p>");
3element.insertAdjacentHTML("afterbegin", "<p>Hello, World!</p>");
4element.insertAdjacentHTML("beforeend", "<p>Hello, World!</p>");
5element.insertAdjacentHTML("afterend", "<p>Hello, World!</p>");
一个例子（点击按钮，插入Paragraph）
1function a(){
2 var img = document.getElementsByTagName("img")[0];
3 img.insertAdjacentHTML("afterend", "<p>Hello, World!</p>");
4}
5
6// html
7<button onclick="a()"> aaa </button>
8<img src="" alt="asdfsadf">