JS基础---Dom的基本操作
DOM的增删改查
增:
1.创建一个元素节点
document.createElement()
创建新的<p> 元素:var para=document.createElement("p");
2.创建一个文本节点
document.createTextNode()
var node=document.createTextNode("This is a new paragraph.");
3.在已存在的元素中追加新元素
element.appendChild()
向 <p> 元素追加这个文本节点: para.appendChild(node);
4.创建属性节点
document.createAttribute()
5.在已存在的节点前添加一个新元素
insertBefore(所要添加的新节点,已存在的节点)
删:
1.删除节点
removeChild()
2.删除属性
removeAttribute()
3.替换节点
replaceChild(要插入的新元素,将被替换的老元素)
4.复制节点
cloneNode(true/false)
true:复制当前节点及子节点
false:仅复制当前节点
改:
1.修改html元素的内容
document.getElementById(id).innerHTML="新内容"
2.修改元素的属性
document.getElementById(id).属性="新值"
或者
元素节点.setAttribute(属性,值)
3.修改元素的CSS样式
document.getElementById(id).style.样式="新值"
查:
1.通过id查找HTML元素节点
document.getElementById(元素id)
2.通过元素的name属性查找HTML元素节点
document.getElementsByName(元素的name属性)
3.通过元素标签查找HTML元素节点
document.getElementsByTagName(元素标签)
4.获取元素的指定属性节点
元素节点.getAttribute(元素属性名)
附:
jQuery DOM的增删改查
增:
1.创建元素节点
直接使用$(html)工场函数来创建Dom对象
var $new=$("<p id="title">创建元素节点</p>")
2.创建文本节点
在创建元素节点时,可以一起创建
3.创建属性节点
同上
删:
1. remove() 将该节点及包含的所有后代节点都删除
2. empty() 清空节点,清空此元素的内容
3.removeAttr() 删除某个元素的特定属性
4.removeClass() 移除样式
改:
1.获取、设置HTML、文本的值
html() 读取或设置某个元素中的html内容,同 js 中的innerHTML属性
text() 读取设置某个元素的文本内容,同 js 中的innerText属性
vue() 可以用来获取和设置元素的值,同 js 中value属性
2.获取、设置属性
attr() 只需给该方法传递一个参数,即属性名称
3.获取、设置CSS样式
attr(class , "样式类") 设置样式
css("样式" , "值") 设置样式
addClass(“样式类”) 追加样式
toggle( function(){//显示} , function(){//隐藏} ) 交换一组动作
toggleClass() 控制样式上的重复切换
hasCLass() 判断元素中是否含有某个class,有则返回true
5.插入节点
append() 向匹配的元素内部追加内容
appendTo() 将匹配的内容追加到
prepend() 向匹配的元素内部前置内容
prependTo() 将匹配的元素前置到
after() 在匹配的元素后插入内容
insertAfter() 反之
before() 在匹配的元素前面插入内容
insertBefore() 反之
注意:移动节点时,首先是先从文档中删除元素,再将其插入到指定节点
6.复制节点
clone(true) 参数为true的话,将同时复制元素中所绑定的事件
7.替换节点
replaceWith() 将匹配内容替换成指定的HTML或者DOM元素
replaceAll() 指定的内容将全部替换......
注意:替换后原先绑定的事件将会与被替换的元素一起消失
8.包裹节点
wrapAll() 该方法将所有匹配到的元素用一个元素包裹
wrapInner() 该方法将每一匹配到的元素(包括它的文本节点)都单独用其他结构标记包裹起来
查:
直接使用jQuery的选择器查找
总结:
老实说原生js很恶心,一个个名字又臭又长,jquery是js的一个库,用来简化Dom操作的,因此jquery在dom操作上很多都和原生用法如出一辙,而且名字又短,所以今后两者使用的时候短而简的方法名就是jquery的方法。