JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏(22)

日期：2020-05-11 栏目：程序人生 浏览：次 
<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>DOM</title>
 </head>

 <body>
 <div id="div1">
 <p id="p1">p1</p>
 <p id="p2">p2</p>
 <p id="p3">p3</p>
 </div>
 <script type="text/javascript">
 var div1 = document.getElementById("div1");
 console.log(div1.firstChild); //换行
 console.log(div1.firstElementChild); //p1结点
 var childs=div1.childNodes; //所有子节点
 for(var i=0;i<childs.length;i++){
 console.log(childs[i]);
 }
 console.log(div1.hasChildNodes());
 </script>
 </body>
</html>

结果：

4.3、选择器

getElementById()

 一个参数:元素标签的ID
getElementsByTagName() 一个参数:元素标签名
getElementsByName() 一个参数:name属性名
getElementsByClassName() 一个参数:包含一个或多个类名的字符串

classList

返回所有类名的数组

  • add （添加）
  • contains （存在返回true,否则返回false）
  • remove（删除）
  • toggle（存在则删除，否则添加）
querySelector() 接收CSS选择符，返回匹配到的第一个元素，没有则null
querySelectorAll() 接收CSS选择符，返回一个数组，没有则返回[]

示例：

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>DOM</title>
 <style type="text/css">
 .red {
 color: red;
 }
 
 .blue {
 color: blue;
 }
 </style>
 </head>

 <body>
 <div id="div1" class="c1 c2 red">
 <p id="p1">p1</p>
 <p id="p2">p2</p>
 <p id="p3">p3</p>
 </div>
 <script type="text/javascript">
 var ps = document.getElementsByTagName("p");
 console.log(ps);

 var div1 = document.querySelector("#div1");
 console.log(div1.classList);
 div1.classList.add("blue"); //增加新式
 div1.classList.toggle("green"); //有就删除，没有就加
 div1.classList.toggle("red");
 console.log(div1.classList);
 </script>
 </body>

</html>

结果：

4.4、样式操作方法style

style.cssText 可对style中的代码进行读写
style.item() 返回给定位置的CSS属性的名称
style.length style代码块中参数个数
style.getPropertyValue() 返回给定属性的字符串值
style.getPropertyPriority() 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串
style.removeProperty() 删除指定属性
style.setProperty() 设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"")