js里面dom元素操作不支持隐式迭代(js操作dom不能直接操作一堆,只能单个操作)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button class="btn" id="butinfo" name="an">按钮</button>
<button class="btn" id="butlist" name="an">按钮</button>
<div></div>
<script>
var jt=document.querySelector(".btn");
var jtall=document.querySelectorAll(".btn");
console.log(jt);
console.log(jtall);
console.log(jtall[0]);
console.log(jtall[1]);
var html =document.documentElement;
console.log(html);
var body =document.body;
console.log(body);
var id = document.getElementById("butinfo");
console.log(id);
console.log(butinfo);
var Class = document.getElementsByClassName("but");
console.log(Class);
console.log(Class[0]);
console.log(Class[1]);
var tagname = document.getElementsByTagName("button");
console.log(tagname);
console.log(tagname[0]);
console.log(tagname[1]);
var name1 = document.getElementsByName("an");
console.log(name1);
console.log(name1[0]);
console.log(name1[1]);
var create=document.getElementsByClassName("btn");
var list = document.createElement("div");
list.className="btn";
document.body.appendChild(list);
console.log(create);
</script>
</body>
</html>
操作dom的属性和方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.btn{
background-color: deeppink;
}
</style>
</head>
<body>
<button class="btn list" name="but" id="bttninfo"
style="width: 100px;height: 30px;color: blue">按钮</button>
<script>
var btnlist = document.getElementsByClassName("btn")[0];
console.log(btnlist);
console.log(btnlist.className);
console.log(btnlist.name);
console.log(btnlist.id);
console.log(btnlist.style);
console.log(btnlist.style.width);
btnlist.className="btn pink";
console.log(btnlist.classList);
console.log(btnlist.classList[0]);
console.log(btnlist.classList[1]);
btnlist.classList.add("date");
console.log(btnlist.classList.contains("btn"));
console.log(btnlist.classList.contains("time"));
console.log(btnlist.classList.length);
btnlist.classList.remove("date");
btnlist.classList.toggle("date");
btnlist.style.width="200px";
btnlist.style.backgroundPosition="1px 2px";
btnlist.style.border="1px solid red";
btnlist.setAttribute("cls-tag","自定义");
console.log(btnlist.getAttribute("cls-tag"));
console.log(window.getComputedStyle(btnlist).backgroundColor);
</script>
</body>
</html>
dom子父节点操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>dom子父节点操作</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button id="btn">按钮3</button><button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<ul id="menu">
<li>蔬菜</li>
<li id="liinfo">水果</li>
</ul>
<input type="text" id="userName"/>
<h1>1234</h1>
<script>
var btn = document.querySelector("#btn");
console.log(btn);
console.log(btn.nextElementSibling);
console.log(btn.previousElementSibling);
console.log(btn.nextSibling);
console.log(btn.previousSibling);
console.log(menu.childElementCount);
console.log(menu.children);
console.log(menu.childNodes);
for(var i = 0;i<menu.children.length;i++){
console.log(menu.children[i]);
}
console.log(menu.childNodes);
for(var i = 0;i<menu.children.length;i++){
if(menu.childNodes[i].nodeName.toLowerCase()=="li"){
console.log(menu.childNodes[i].childNodes[0].nodeValue);
}
}
console.log(liinfo.parentElement);
console.log(liinfo.parentNode);
console.log(menu.firstChild);
console.log(menu.firstElementChild);
console.log(menu.lastChild);
console.log(menu.lastElementChild);
var ipt = document.createElement("input");
ipt.type = "button";
ipt.value = "按钮";
console.log(ipt);
document.body.appendChild(ipt);
document.body.insertBefore(ipt, userName);
Node.prototype.insertAfter = function (newchild, refchild) {
console.log(this);
this.insertBefore(newchild, refchild.nextElementSibling);
}
document.body.insertAfter(ipt, userName);
document.body.appendChild(ipt.cloneNode());
document.getElementsByTagName("h1")[0].remove();
</script>
</body>
</html>