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的方法。