做网站英文编辑有前途吗,网站缩略图尺寸,空包网站怎么建设,python编程软件官网获取元素
1、getElementById() 通过id属性获取一个元素节点对象 div iddiv1/div script var div1 document.getElementById(div1) /script 2、 getElementsByTagName()可以根据标签名来获取一组元素节点对象
这个方法会给我们返…获取元素
1、getElementById() 通过id属性获取一个元素节点对象 div iddiv1/div script var div1 document.getElementById(div1) /script 2、 getElementsByTagName()可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象所有查询到的元素都会封装到对象中
即使查询到的元素只有一个也会封装到数组中返回 div iddiv1/div div classcls/div div/div script var divs document.getElementsByTagName(div) console.log(divs); // [div#div1, div.cls, div, div] /script 3、getElementsByName() 通过name属性获取一组元素节点对象 div iddiv1 namenme/div div classcls namenme/div div namenme/div script var divs document.getElementsByName(nme) console.log(divs); // [div#div1, div.cls, div] /script 4、 getElementsByClassName() 通过class属性获取一组元素节点对象 不支持IE8及以下浏览器 div iddiv1 classcls/div div classcls/div div classcls/div script var divs document.getElementsByClassName(cls) console.log(divs); // [div#div1.cls, div.cls, div.cls] /script 5、 document.querySelector()
-需要一个选择器的字符串作为参数可以根据一个css选择器来查询一个元素节点对象
-该方法总会返回唯一的元素如果满足条件的元素是多个那么它只会返回第一个
-IE8以上的都适用 div iddiv1 classcls/div div classcls/div script var divs document.querySelector(.cls) console.log(divs); // div iddiv1 classcls/div /script div iddiv1 classcls p/p /div script var p document.querySelector(.cls p) console.log(p); // p/p ./script 6、document.querySelectorAll()
-该方法和qureySelector()用法类似 不同的是它将会将符合条件的元素封装到一个数组中返回 -即使符 合条件的元素只有一个它也会返回数组 div iddiv1 classcls/div div classcls/div div classcls/div script var divs document.querySelectorAll(.cls) console.log(divs); // [div#div1.cls, div.cls, div.cls] /script 7、获取body标签
1、document.getElementsByTagName(body)[0]
2、document.body
8、获取html标签
document.documentElement
9、获取页面中的所有元素
1、document.all
2、document.getElementsByTagName(*)
操作元素
操作内容
element.innerText 从起始位置到终止位置的内容但它去除html标签同时空格和换行也会去掉
element.innerHTML 起始位置到终止位置的全部内容包括HTML标签同时保留空格和换 div classbox p 内容 /p /div script var box document.querySelector(.box) console.log(box.innerHTML); // p 内容 /p console.log(box.innerText); // 内容 /script 操作属性
操作标签自带的属性
比如src herf value chexked disabled title img src./img1.png alt input typetext script var img document.querySelector(img) var ipt document.querySelector(input) img.src ./img2.png ipt.value 直接赋值value /script 操作元素样式
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1、修改行内样式操作 img src./img1.png alt piedhfiuse/p script var img document.querySelector(img) var p document.querySelector(p) img.style.height 100px p.style.fontSize 20px /script 这种写法是通过js把样式写在行内
2、修改类名样式操作 h1 classtitle/h1 p classcontiedhfiuse/p script var ttle document.querySelector(.title) var cont document.querySelector(.cont) ttle.className title cont.className content /script 这种方法需要提前在css中写好类名样式比如titlecontent然后通过js操作直接把类名换成写好的类名 注意
JS里面的样式采取驼峰命名法比如 fontSize backgroundColor JS 修改 style 样式操作 产生的是行内样式CSS权重比较高 如果样式修改较多可以采取操作类名方式更改元素样式 class 因为是个保留字因此使用className来操作元素类名属性 className 会直接更改元素的类名会覆盖原先的类名
操作自定义属性
获取自定义的属性
element.getAttribute(属性); h1 classtitle index1/h1 script var ttle document.querySelector(.title) console.log(ttle.getAttribute(index)); // 1 /script 设置自定义的属性
element.setAttribute(属性,值); h1 classtitle/h1 p classcontiedhfiuse/p script var ttle document.querySelector(.title) var cont document.querySelector(.cont) ttle.setAttribute(index, 123) cont.setAttribute(abc, 1) console.log(ttle.getAttribute(index)); // 123 console.log(cont.getAttribute(abc)); // 1 /script 移除属性
element.removeAttribute(属性); h1 classtitle/h1 p classcontiedhfiuse/p script var ttle document.querySelector(.title) var cont document.querySelector(.cont) ttle.setAttribute(index, 123) cont.setAttribute(abc, 1) console.log(ttle.getAttribute(index)); // 123 console.log(cont.getAttribute(abc)); // 1 ttle.removeAttribute(index) cont.removeAttribute(abc) console.log(ttle.getAttribute(index)); // null console.log(cont.getAttribute(abc)); // null /script H5新增自定义属性
H5新规定的自定义属性必须由 data- 开头 例如data-indexabcd
获取自定义属性
1、element.getAttribute(自定义属性名)
2、element.dataset.属性名 h1 data-index123/h1 script var ttle document.querySelector(h1) console.log(ttle.dataset.index); // 123 console.log(ttle.dataset[index]); // 123 /script 设置自定义属性 h1 data-index123/h1 script var ttle document.querySelector(h1) ttle.setAttribute(data-id, 1) console.log(ttle.dataset.id); // 1 /script 排他思想
有一组元素你只想给其中一个设置设置样式此时就需要把其他的元素排除掉
利用循环先给所有元素清除样式然后再设置自己想设置的那个 !-- 需求给当前点击的按钮添加背景色 -- button按钮1/button button按钮2/button button按钮3/button button按钮4/button script //1、获取到所有的按钮 var btns document.querySelectorAll(button); //2、通过循环给所有的按钮绑定点击事件处理函数 for (var i 0; i btns.length; i) { // console.log(btns[i]); btns[i].onclick function () { // 排他思想 先去除所有的背景色样式点击谁就给谁添加背景色 for (var j 0; j btns.length; j) { btns[j].style.backgroundColor ; } // 给你每个按钮添加背景色 this.style.backgroundColor red; }; } /script
