JS和JQuery对操作DOM的方法
本文主要和大家分享JS和JQuery对操作DOM的方法,主要以代码的方法,希望能帮助到大家。
查询节点:
js:1.根据ID查询;2.根据标签名查询;3.根据name查询;4.根据层次查询;详情如下:
<script> //1.根据ID查询节点 var ul = document.getElementById("city"); var cd = document.getElementById("cd"); console.log(ul); console.log(cd); //2.根据标签名查询节点 //2.1在整个文档(document)内查询 console.log(document.getElementsByTagName("li")); //2.2在某个元素节点(element)内查询 console.log(ul.getElementsByTagName("li")); //3.根据name查询节点(基本都是给表单控件用的) console.log(document.getElementsByName("sex")); //4.根据层次查询节点 //获取已得到的节点的父亲、孩子和兄弟 //4.1获取父亲,返回的是单个值 console.log(cd.parentNode); //4.2获取孩子,返回的是多个值 //这种方式返回的节点是个数组,并且会把空格当做孩子放入数组中 console.log(ul.childNodes); //不带空格的获取孩子的节点 console.log(ul.getElementsByTagName("li")); //标准API中没有直接查询兄弟的方法, //必须通过查询父亲、查询孩子来实现查询兄弟, //下面的语句输出:上海 console.log(cd.parentNode.getElementsByTagName("li")[1]); </script>
jQuery:直接利用jQuery选择器,选中元素,进行操作即可;请查看另一片文章:jQuery选择器https://blog.csdn.net/huang_yx/article/details/79686975(点击打开链接)
读写节点:
js:大致分为:1.读写节点名称和类型;2.读写节点内容;3.读写节点属性;4.读写表单控件的值;详情如下:
<script> //1.读取节点的名称和类型 //获取p1 var p1 =document.getElementById("p1"); console.log(p1.nodeName); console.log(p1.nodeType); //2.读写节点的内容(<p>内容</p>) //innerHTML:支持子标签 console.log(p1.innerHTML) console.log(p1.innerHTML = '单标签试一试') console.log(p1.innerHTML) //innerText:不支持子标签 var p2 = document.getElementById("p2"); console.log(p2.innerText); p2.innerText = "2.<u>查询</u>节点"; //3.读写节点的属性 //3.1.标准的API是下面的三个 //先取到这个节点 var img = document.getElementById("li"); console.log(img.getAttribute("src")); img.setAttribute("src", "../img/add.png"); img.removeAttribute("src"); //3.2.新的API(低版本浏览器不支持) //节点.属性名(class除外,要写成className) //注意点:.style和.className是标准的 var a = document.getElementById("baidu"); console.log(a.href); a.href = "undifined"; //4.读写表单控件的值 //input.value/input.value="" </script>
jQuery:
读写节点的HTML内容(支持子标签):对应上面js的第2点
obj.html()/obj.html("<span>123</span>")
读写节点的文本内容(不支持子标签):对应上面js的第2点
obj.text()/obj.text("123")
读写节点的属性值:对应上面js第3点
obj.attr("属性名")/obj.val("属性名","属性值")
读写节点的value属性值:对应上面js第4点
obj.val()/obj.val("abc")
注:obj表示jQuery对象
增删节点:js对节点的增删只能通过父节点,jQuery则样方便很多,有很多对应的api
js:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增删节点</title> <script> function add(){ //创建新节点 //相当于在内存中创建了一个<li></li> var li = document.createElement("li"); //相当于在<li>中创建了一个内容 li.innerHTML = "天津"; //追加新节点,可以通过父亲的孩子获取,也可以直接通过ID获取 var ul = document.getElementById("city"); ul.appendChild(li); } //插入到节点中间 function insertion(){ //创建新节点 var li = document.createElement("li"); li.innerHTML = "成都"; //插入新节点,到广州之前 var ul = document.getElementById("city"); var gz = document.getElementById("gz"); ul.insertBefore(li, gz) } //删除节点,必须通过父亲来删除 function del(){ //获取要删除的节点 var sz = document.getElementById("sz"); //必须通过父亲才能取删除孩子的节点 sz.parentNode.removeChild(sz); } </script> </head> <body> <p> <input type="button" value="增加" onclick="add();"/> <input type="button" value="插入" onclick="insertion()"/> <input type="button" value="删除" onclick="del()"/> </p> <ul id="city"> <li>北京</li> <li>上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> </body> </html>
jQuert:
创建节点:
$("节点内容");
$("<span>你好</span>")
插入节点:常用API
parent.append(obj):作为最后一个子节点添加进来
parent.prepend(obj):作为第一个子节点添加进来
brother.after(obj):作为下一个兄弟节点添加进来
brother.before(obj):作为上一个兄弟节点添加进来
删除节点:常用API
obj.remove():删除节点
obj.remove(selector):只删除满足selector的节点
obj.empty():清空节点
遍历节点:jQuery对应的一些API,方便节点操作
children()/children(selector):直接子节点
next()/next(selector):下一个兄弟节点
prev()/prev(selector):上一个兄弟节点
siblings()/siblings(selector):所有兄弟
find(selector):查找满足选择器的所有后代
parent():父节点
总结:
js和jQuery对节点的操作无非都是增删改查之类,但是jQuery是一个js的框架,它的核心理念:write less,do more;极大的简化代码的书写。它封装了JS,CSS,DOM,提供了一致的、简约的API,所有使用起来更加方便快捷,相应的写法也更加简单。
相关推荐:
以上就是JS和JQuery对操作DOM的方法的详细内容,更多请关注其它相关文章!