DOM知识点总结
- 2022 年 6 月 11 日
- 筆記
- js学习之路
DOM-Document Object Model
部分知识点总结,话不多说,上代码
1.DOM查询剩余方法
<script>
window.onload = function () {
//获取body标签
//var body = document.getElementByTagName("body")[0];
//在document中有一个属性body,它保存的是body的引用
var body = document.body;
// document.documentElement保存的是html标签
var html = document.documentElement;
console.log(html);
//document.all代表页面所有的元素
var all = document.all; 根基元素的class属性chaxunyi
//根据元素的class属性查询一组元素节点对象
//getElementsClassName()不兼容ie8及以下
var box1 = document.getElementsByClassName("box1");
console.log(box1.length);
//获取页面中所有的div
var divs = document.getElementsByTagName("div");
/*
* document.querySelector()
* -需要一个选择器的字符串作为参数,可以根据css选择器来查询一个元素节点对象
* -虽然ie8中没有getElementsByClassName(),但是也可以使用querySelector()代替
* -使用该方法会返回唯一一个元素,如果满足条件的元素有多个,那么他只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
/*
* document.querySelectorAll()
* -方法和querySelector()用法类似,不同的是她会符合条件的元素封装到一个数组中
* -即使符合条件的元素只有一个.也会返回数组
*
*/
var box1=document.querySelectorAll(".box1");
}
</script>
</head>
<body>
<div class="box1">
<div>第一个</div>
</div>
<div class="box1">
<div>第二个</div>
</div>
<div class="box1">
<div>第三个</div>
</div>
</body>
2.DOM增删改
写了具体几个case来加深理解
//创建一个"广州"节点,添加到#city下
myClick("btno1",function(){
//创建广州节点<li>广州</li>
//创建li元素节点
//可以创建一个元素节点对象
//需要一个标签名作为参数,将会根据标签名创建元素节点对象
//并将创建的对象作为返回值返回
var li= document.createElement("li");
//创建广州文本节点
//document.createTextNode()
//可以用来创建一个文本节点对象
//需要一个文本内容作为参考,将会根据该内容创建文本节点,并将新的节点返回
var geText= document.createTextNode("广州");
//将geText设置li的子节点
//向一个父节点添加一个新的子节点
//用法:父节点.appendChild(子节点)
li.appendChild(gzText);
//将"广州"添加到city下
city.appendChild(li);
;})
//将广州插入到#bj之前
myClick("btn02",function(){
//创建一个广州
var li=document.createElement("li");
var gzText=document.createTextNode("广州");
li.appendChild(geText);
//获取id为bj的节点
var bj=document.getElementById("city");
//获取city
var city=document.getElementById("city");
//insertBefore()
//--可以在指定的子节点前插入新的子节点
//语法:
//父节点.insertBefore(新节点,旧节点)
city.insertBefore(li,bj);
})
//replaceChild()
//可以使用指定的子节点替换已有的子节点
//语法:父节点.replaceChild(新节点,旧节点);
//removeChild()
//--可以删除一个子节点
//--语法:父节点.removeChild(子节点);
//也可 子节点.parentNode.removeChild(子节点)
bj.parentNode.removeChild(bj);
//向city中添加广州
var city=document.getElementById("city");
//使用innterHTML也可以完成DOM的增删改的相关操作,动作太大一般我们会两种方式结合
//city.innterHTML+="<li>广州</li>"
var li=document.createElement("li");
li.innterHTML="广州";
