JS中DOM节点的CRUD

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取body标签//var body = document.getElementsByTagName("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;//console.log(all.length);/*for(var i=0 ; i<all.length ; i++){console.log(all[i]);}*///all = document.getElementsByTagName("*");//console.log(all.length);/** 根据元素的class属性值查询一组元素节点对象* getElementsByClassName()可以根据class属性值获取一组元素节点对象，*   但是该方法不支持IE8及以下的浏览器*///var box1 = document.getElementsByClassName("box1");//console.log(box1.length);//获取页面中的所有的div//var divs = document.getElementsByTagName("div");//获取class为box1中的所有的div//.box1 div/** document.querySelector()*    - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象*   - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替*  - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个*/var div = document.querySelector(".box1 div");var box1 = document.querySelector(".box1")//console.log(div.innerHTML);//console.log(box1.innerHTML);/** document.querySelectorAll()*     - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回*  - 即使符合条件的元素只有一个，它也会返回数组*/box1 = document.querySelectorAll(".box1");box1 = document.querySelectorAll("#box2");console.log(box1);};</script></head><body><div id="box2"></div>  <div class="box1">我是第一个box1     <div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div class="box1"><div>我是box1中的div</div></div><div></div></body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到#city下myClick("btn01",function(){//创建广州节点 <li>广州</li>//创建li元素节点/** document.createElement()*  可以用于创建一个元素节点对象，*     它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，*   并将创建好的对象作为返回值返回*/document.createElement("di");var li = document.createElement("li");//创建广州文本节点/** document.createTextNode()*   可以用来创建一个文本节点对象*  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回*/var gzText = document.createTextNode("广州");//将gzText设置li的子节点/** appendChild()*    - 向一个父节点中添加一个新的子节点*     - 用法：父节点.appendChild(子节点);*/li.appendChild(gzText);//获取id为city的节点var city = document.getElementById("city");//将广州添加到city下city.appendChild(li);});//将"广州"节点插入到#bj前面myClick("btn02",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** insertBefore()*   - 可以在指定的子节点前插入新的子节点*  - 语法：*         父节点.insertBefore(新节点,旧节点);*/city.insertBefore(li , bj);});//使用"广州"节点替换#bj节点myClick("btn03",function(){//创建一个广州var li = document.createElement("li");var gzText = document.createTextNode("广州");li.appendChild(gzText);//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** replaceChild()*     - 可以使用指定的子节点替换已有的子节点*   - 语法：父节点.replaceChild(新节点,旧节点);*/city.replaceChild(li , bj);});//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** removeChild()*  - 可以删除一个子节点*    - 语法：父节点.removeChild(子节点);*      *       子节点.parentNode.removeChild(子节点);*///city.removeChild(bj);bj.parentNode.removeChild(bj);});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用*///city.innerHTML += "<li>广州</li>";//创建一个livar li = document.createElement("li");//向li中设置文本li.innerHTML = "广州";//将li添加到city中city.appendChild(li);});};function myClick(idStr, fun) {var btn = document.getElementById(idStr);btn.onclick = fun;}</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul></div></div><div id="btnList"><div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div><div><button id="btn02">将"广州"节点插入到#bj前面</button></div><div><button id="btn03">使用"广州"节点替换#bj节点</button></div><div><button id="btn04">删除#bj节点</button></div><div><button id="btn05">读取#city内的HTML代码</button></div><div><button id="btn06">设置#bj内的HTML代码</button></div><div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div></div></body>
</html>

JS中DOM节点的CRUD相关推荐

原生JS中DOM节点相关API合集
原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Te ...
js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
JS中DOM是什么、DOM的基本操作、DOM操作盒子模型的13个api——大总结（附源码）
文章目录一,什么是DOM? 二,DOM的具体用途及发展史? 1,操作元素 2,操作属性 3,操作文本三,JS操作盒子模型需要的13个api 一,什么是DOM? DOM:Document Objec ...
vue 和 js 获取 dom节点下的某个元素，然后设置样式
vue获取dom节点下的类名,然后修改样式 <div ref="divRef"><div class="a">提到岁月,你们总说它是长河 ...
JS对DOM节点的操作--增加节点，删除节点
(1):DOM :DOM文档树的全称是document object model ,也就是文档对象模型,在js中,把整页面当成一个dom树,而我们可以对每一个节点都可以进行相应的操作,比如创建一个节点 ...
js ，DOM节点，制作点名器
DOM节点 document 页面中最大的节点,有且只有一个.不属于元素节点,是页面中所有节点的容器. 根节点. html 页面中最大的元素节点.根元素节点. 元素节点 html标签文本节点每一段 ...
原生JS操作DOM节点代码
转载自:https://www.cnblogs.com/daysme/p/6538588.html DOM节点操作函数总结 .parentNode 获取父级元素移除元素 function remov ...
js的DOM节点操作：创建，插入，删除，复制，查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
JS中DOM元素的操作
一.DOM元素的获取 1)document.getElementsByClassName ( "class") 返回集 htmlcollection ,用法和数组一致说明: cl ...

JS中DOM节点的CRUD

JS中DOM节点的CRUD相关推荐

最新文章

热门文章