代码 // 删除元素的函数 function deleteChilds() { var ul = document.getElementsByTagName("ul")[0]; // 获取父级DOM...> 删除父级元素的所有节点,我们常规性的思维,很容易写这样的代码,如下的代码是无法删除干净的 function deleteChilds() { var ul = document.getElementsByTagName...("ul")[0]; // 获取父级DOM var len = ul.childNodes.length; // 子元素的个数 for(var i = 0;i获取父级DOM var len = ul.childNodes.length; // 子元素的个数 for(var i = len-1;i>=0;i--) {...就没有任何意义价值了的 var ul = document.getElementById('ul');// 获取父级元素的DOM // 判断是否包含子元素
之前，我们已经简单的使用过JS控制元素的CSS样式； 在具体使用的时候还有一些需要重点注意的细节： 名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写： 比如background-color...= function () { //获取所有的p标签---根据标签名字来获取---伪数组 var pObjs = document.getElementsByTagName("p");...var inputs=document.getElementsByTagName("input"); for(var i=0;ilength;i++){ //...ul中所有的子节点 var nodes = document.getElementById("uu").childNodes; for (var i = 0; i length....onclick = function () { //获取id为uu的ul中所有的li var list = getElementsByTagName("li"); //遍历
各节点之间的关系，又可分为以下几个方面： 根节点： 标签是整个文档的根节点，有且仅由一个。 子节点：指的是某一个节点的下级节点。 父节点：指的是某一个节点的上级节点。...);// 输出结果：(3) [li, li, li] 除此之外，元素对象还提供了children属性用来获取指定元素的子元素。...li id="test" name="test">testli> var lis1 = document.getElementsByTagName('li'); //...innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。...单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。 2.4 元素属性 在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。
，元素周围自动换行 span：行内元素，前后不会换行 class和id选择器区别 class样式可以使用多次，id样式只能使用一次，id选择器的优先级大于类别选择器 6，值和变量 typeof检测变量类型...全局变量：不定义在任何一个函数里，可以在任何地方使用（尽量不要使用全局变量） 什么是闭包 子函数可以使用父函数中的局部变量 实例：隔行变色（aLi相当于数组，aLi.length是表示数组里面有多少元素...获取元素： getElementById(元素的id名字) getElementsByTagName("") 按标签名字取-〉数组 数组.length 关于数组： 数组.sort() 字符串.split...getElementById 获取子节点：childNodes 子节点的个数 操作子节点 例子： window. (){ var oUl=document.getElementById('ul1')...'); var aLi=oUl.getElementsByTagName('li'); oLi.innerHTML=oTxt.value; if(aLi.length==0){ oUl.appendChild
var oA; for(var i=0; ilength; i++){ //如果子元素为li，且这个li有子菜单ul //注意：标签名必须用大写"LI" if(aLi...[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){ oA = aLi[i]; //找到超链接 oA.onclick =...oUl.childNodes;Ul的子元素就是Li。...('ul')[0].getElementsByTagName('li'); var i=0; for(i=0;ilength;i++) { aLiBtn[i].onmouseover...0].getElementsByTagName('li');把每个月当成一个块，并把所有的月块组成一个数组 for(i=0;ilength;i++) { aLiBtn[i].onmouseover
，作为最后一个子节点。...(8)element.removeChild() 从元素中移除子节点。 (9)element.replaceChild() 替换元素中的子节点。...>北京li> li>上海li> li>广州li> li>深圳li> 使用JS实现二级联动 下拉框是否选中 selected = selected options.length; <meta...[Object].removeEventListener(“name_of_event”, fnHandler); fnHandler : 移除时,传入的"事件响应函数",必须和添加时,
获取页面中的元素可以使用以下几种方式： 根据ID获取 根据标签名获取 通过HTML5新增的方法获取 特殊元素获取 根据ID获取 使用 getElementById()方法可以获取带有ID的元素对象。...Element.getElementsByTagName('标签名'); 注意：父元素必须是单个对象（必须指明是哪一个元素），获取的时候不包括父元素自己。...var ol = document.getElementById('ol'); console.log(ol.getElementsByTagName('li')); H5新增获取元素方式...包含文本节点、元素节点 console.log(div.nextSibling); console.log(div.previousSibling); //仅获取元素节点...('li'); //2.添加节点 node.appendChild(child) node父级，child子级，后面追加元素，类似于数组中的push var ul = document.querySelector
tab栏切换案例 能够区分元素节点、文本节点、属性节点 能够获取指定元素的父元素 能够获取指定元素的所有子元素 能够说出childNodes和children的区别 能够使用createElement...获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素...H5自定义属性 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。...父级节点 ?...添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 var ul = document.querySelector('ul')
获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i]...H5自定义属性 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。...节点概述 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。...子节点 所有子节点 子元素节点 li>我是lili> li>我是lili> li>我是lili>...添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 var ul = document.querySelector('ul')
使用文档对象 //获取标题 document.write(document.title); 换标题 function title(params) { n++; if (n...获得body的子元素中所有的p元素 myBodyElements=myBody.getElementsByTagName("p");...，如果是false则仅克隆该节点。...本例中仅仅将文本节点替换 4.使用 innerHTML属性 innerHTML可以获取节点内的内容，即原生的HTML代码 还可以读对里面的内容进行设置 <script language=...{ if(tp){ var checkbox = tp.getElementsByTagName('input'); for(var i=0;ilength
【案例】: 1)菜单效果 2）网页小布局 2.9.2.3.方式二详解-position 2.9.2.3.1.定位的基本使用 定位原则:子绝父相 在网页的开发中，定位一般需要结合：top bottom...DOM树打印 //获取整个网页的document对象 console.log(document); //获取网页中document的所有子节点 console.log(document.childNodes...函数名 含义 document.getElementById 根据id获取一个标签(元素) document.getElementsByTagName 根据标签名称获取多个标签 document.getElementsByClassName...('li')[0]; var li2 = document.getElementsByTagName('li')[1]; var li3 = document.getElementsByTagName...('li')[2]; var li4 = document.getElementsByTagName('li')[3]; var li5 = document.getElementsByTagName
使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。 getElementsByTagName();获取的是一个集合 var con=document.getElementsByTagName("li"); for (var i=0; ilength..."> var con=document.getElementsByTagName("li"); for(i=0;ilength;i++){ document.write...万 130万2居限量抢购li> li>黄城根小学学区仅260万 121平70万抛!...image.png ---- 若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
-- 子节点只算第一层的，在这里 span 是 li 的子节点，而不是 ul 的子节点 --> 子节点 li > li >li >...getElementById( 'ul1'); //children 获取元素节点 //alert(oUl.children.length); for( var i=...getElementsByTagName( 'a'); for( var i= 0; i1 li > li >2 li > li >3 li > 四、通过class类获取元素...getElementsByTagName( '*'); for( var i= 0; i< aEle.
document.getElementsByTagName('*');//获取所有元素 PS：IE浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素节点。...document.getElementsByTagName('li');//获取所有li元素，返回数组 document.getElementsByTagName('li')[0];//获取第一个li元素...，HTMLLIElement document.getElementsByTagName('li').item(0)//获取第一个li元素，HTMLLIElement document.getElementsByTagName...('li').length;//获取所有li元素的数目 PS：不管是getElementById还是getElementsByTagName，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦...(box.childNodes[0]);//获取第一个子节点对象 PS：使用childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如 HTMLElement；也有可能返回的是文本子节点
（学习演示时用的多） (2) 将事件内嵌到html中，而响应行为用函数进行封装。（开发中用的多） (3) 将事件和响应行为，与html标签完全分离。...--------------- 1、js的常用事件 onclick 点击事件 onchange 用户改变域的内容事件 需求：实现二级联动..."> // 获取 li id="xj" value="xingji">星际争霸li> 节点的value属性的值 var..." name="chongqing">重庆li>的前面 var ul = document.getElementsByTagName("ul"); var...("天津"); li.appendChild(txt); var ul = document.getElementsByTagName("ul");
a href="javascript:;"> 皇城根小学学区仅260万 121平70万抛！...tapUl.getElementsByTagName('li'); // alert(tapLi.length) for (var i = 0; i length; i+...("div");==divWrap.children var li1 = ul.childNodes;//==用这个获取，可是七个，把空文本换行符也包含进来的7个子集 var li2 = ul.getElementsByTagName...('li');//用这个方法，获取的就是那干脆又干净的三个li var li3 = ul.children; // alert(li3.length); //li1 == li2,方法获取到的都是一个集合...，使用的tagname获取的三个div // alert('yes'); arr = divs[j]; // alert(divs[j]); } } */ */
'; } }; 3、var aLi_right = aUl[1].getElementsByTagName('li'); // aLi_right instanceof Array /...('ul'); var aLi_left = aUl[0].getElementsByTagName('li'); var aLi_right = aUl[1].getElementsByTagName...('li'); var toConcatArray = function(left, right) { var arrLi = []; for (var i = 0; i length...，只有目标li，可以直接： //var aLi = document.getElementsByTagName('li'); 4、 获取视口大小和文档大小 /*视口的大小，部分移动设备浏览器对innerWidth...*使用方法 ： getViewPort().width; */ function getViewPort() { if (document.compatMode == "BackCompat"
但是需要注意：getElementBy系列和querySelector系列的区别 比如，我们写一个for循环，每次获取li标签的时候，ul生成一个li子元素 li>a...li = document.getElementsByTagName('li'); for(var i = 0;i li.length; i++) { ul.appendChild...来进行判断时，会导致浏览器死循环，因为循环一次的时候，浏览器又重新获取li标签数组，每调用一次就会重新对文档进行查询，就会进入死循环 进行修改：把i li.length改成i li标签数组静态化...，然后打印 conosle.log(li.length) // 6 重新用querySelector获取一遍元素 li>ali> li>bli>...('li')获取到ul里所有li后，不管后续再动态添加了多少li，都是不会对其参数影响
DOM节点操作 DOM节点操作： 获取dom节点： documen.getElementById() document.getElementsByClassName document.getElementsByTagName...插入节点 div1.appendChild(newP) //移动节点 const p1 = document.getElementById('p1') div2.appendChild(p1) 获取子元素列表...DOM 查询做缓存 // 不缓存查询 for(let i = 0, i getElementsByTagName('p').length, i++) { // 每次循环，都会计算...length, 频繁进行 DOM 查询 } // 缓存 DOM 查询结果 const length = document.getElementsByTagName('p').length；for(let...i = 0, i getElementsByTagName('p').length, i++) { // 缓存 length，只进行一次 DOM 查询 } 2.将频繁操作改成一次性操作
它们的使用方式与document对象中同名方法相同。 除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。...因此，推荐在 开发时尽可能的使用innerHTML获取或设置元素的文本内容。...③ 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。 代码实现 PHPli> li class="bg">JavaScriptli> li>C++li> li>Javali> // 获取第2个li元素...var ele = document.getElementsByTagName('li')[1]; // 若li元素中没有strong类，则添加 if (!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
