标签：总结 知识点 DOM li city var document box1 节点
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="广州";
标签：总结,知识点,DOM,li,city,var,document,box1,节点 来源： https://www.cnblogs.com/buxiu888/p/16359496.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。