js操作Dom元素，jquery操作Dom元素相关知识点

Dom

Dom是文档对象模型。
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

js Dom操作

获取元素

1.根据id获取Dom元素：getElementById

document.getElementById('id')

2.根据标签名获取：getElement

document.getElementByTagName('标签名')

3.根据name属性获取：getElementsByName

document.getElementsByName('name')

4.根据选择器获取一个元素：querySelector(’’)

document.querySelector('div')

5.根据选择器选择一组元素：querySelectorAll(’’)

document.querySelectorAll('div')

6.获取html：document.documentElement()

document.documentElement()

7.获取body

document.body

事件基础

绑定事件的两种方法

<script>
    // 获取事件源
    var div = document.querySelector('div');
 // 1.
 div.addEventListener('click', function() {}

    // 2.div.onclick
    div.onclick = function() {
      console.log('我被选中了');
   }
  </script>

常见鼠标事件

常见键盘事件

keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头

三个事件的执行顺序 keydown – keypress – keyup

操作元素

改变元素内容

获取：

element.innerText

获取文本内容，从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会去掉

element.innerHTML

获取全部内容，起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
更改内容

element.innerText='新内容'
单改变文本内容，
element.innerHTML='新内容'
所有内容都要重新写入

获取属性值
元素对象.属性值

var new = img.src

设置属性值
元素对象.属性名=值

img.src='../image'

样式属性的操作

1.element.style 行内样式操作
2.element.className 类名样式操作

通过操作style操纵

此方法修改style样式操纵，产生的是行内样式，css权重比较高

var div = document.querySelector('div');
div.onclick = function() {
	 // div.style里面的属性 采取驼峰命名法
	this.style.backgroundColor = 'red';
	this.style.width = '200px';
}

自定义属性操作

获取属性值：

• element.属性 获取内置属性值，元素本身自带的属性
• element.getAttribute(‘属性’)；主要获取自定义属性。

设置属性值：

• element.属性= ‘值’ 设置内置属性值
• element.getAttribute(‘属性’,‘值’)； 主要设置自定义的属性

移除属性：
element.removeAttribute(‘属性’);

节点操作

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

1. 父级节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

2. 字节点

所有字节点
parentNode.childNode(标准)
//parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
//注意:返回值里面包含了所有的子节点，包括元素节点，文本节点等。


子元素节点
parentNode.children(非标准)
//parentNode.children是一个只读属性，返回所有的子元素节点。
//它只返回子元素节点，其余节点不返回


第1个子节点
parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。最后1个子节点
最后一个子节点
parentNode . lastchild
lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。第1个子元素节点
第一个子元素节点
parentNode.firstElementChild
firstElementChild返回第一个子元素节点，找不到则返回null,最后1个子元素节点
最后一个子元素节点
parentNode.lastElementChild
lastElementchild返回最后一个子元素节点，找不到则返回null。

3. 兄弟节点

下一个兄弟节点

node.nextSibling
返回当前元素的下-个兄弟节点，找不到则返回null。

上一个兄弟节点

node.previouSibling
返回当前元素上—个兄弟节点，找不到则返回null。

4. 添加节点

node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child，指定元素)
将一个节点添加到父节点的指定子节点前面

5. 常见节点

document.createElement(元素标签)
创建一个新的标签
document.createAttribute(元素属性)
创建属性节点
document.createTextNode(文本内容)
创建文本节点

6. 替换节点

replaceChid(要插入的新元素，将被替换的老元素)
将某个节点替换为另一个

7. 复制节点

需要被复制的节点.cloneNode(true/false)
复制此节点
参数：
true：复制当前节点及其所有子节点
false：仅复制当前节点

8. 删除节点

removeChild(要删除的节点)
删除指定节点

jquery Dom

样式属性操作

设置样式属性操作
1.设置单个样式：

// 第一个参数表示：样式属性名称
// 第二个参数表示：样式属性值
$(selector).css(“color”, “red”);

2.设置多个样式（也可以设置单个）

// 参数为 {}（对象）
$(selector).css({“color”: “red”, “font-size”: “30px”});

获取样式属性操作

// 参数表示要获取的 样式属性名称
$(selector).css(“font-size”);

类的操作

1.添加类样式

addClass/className (类名)为指定元素添加类名

2.移除类

removeClass（className）为指定元素移除类

3.判断有没有类样式

hasClass(className)  判断指定元素是否包含类

4.切换类样式

toggleClass(className)为指定元素切换类
该元素有类则移除，没有指定类则添加

节点操作

1.动态创建元素

// $()函数的另外一个作用：动态创建元素
var $spanNode = $(“<span>我是一个span元素</span>”);

2.清空元素

// 清空指定元素的所有子元素
$(selector).empty();
// 没有参数
$(selector).html(“”);
// “自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();

3.复制元素

//作用：复制匹配的元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();

4.添加元素

在元素的最后一个子元素后面追加元素：append()`

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，参数为htmlString
$(selector).append('<div></div>');

// appendTo()
//作用：同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);
 
// prepend()
//作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
 
// after()
//作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);
 
// before()
//作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);

操作form表单

• 设置属性

.attr('','')
$(selector).attr(“title”, “小花啊”);
// 第一个参数表示：要设置的属性名称
// 第二个参数表示：改属性名称对应的值

• 获取属性

var text = $(selector).attr(“title”); 
// 参数为：要获取的属性的名称，改操作会返回指定属性对应的值

• 移除属性

$(selector).removeAttr(“title”); 
// 参数为：要移除的属性的名称

获取值和内容

1. val() 方法

// 作用：设置或返回表单元素的值，例如：input,select,textarea的值
// 获取匹配元素的值，只匹配第一个元素
$(selector).val();
// 设置所有匹配到的元素的值
$(selector).val(“具体值”);

2. text() 方法

// 作用：设置或获取匹配元素的文本内容
//获取操作不带参数,这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作
$(selector).text();
//设置操作带参数，参数表示要设置的文本内容
$(selector).text(“我是内容”);

r(“title”);
// 参数为：要移除的属性的名称

### 获取值和内容

1. val()  方法

// 作用：设置或返回表单元素的值，例如：input,select,textarea的值
// 获取匹配元素的值，只匹配第一个元素
$(selector).val();
// 设置所有匹配到的元素的值
$(selector).val(“具体值”);

2. text() 方法

// 作用：设置或获取匹配元素的文本内容
//获取操作不带参数,这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作
$(selector).text();
//设置操作带参数，参数表示要设置的文本内容
$(selector).text(“我是内容”);