DOM相关方法,属性汇总

Posted 2020-10-07

DOM相关方法,属性汇总

1. 获取元素方法

1. 根据 id 获取元素对象
var ele = document.getElementById("idName");

2. 根据 标签名 获取元素对象

var elements = document.getElementsByTagName("标签名");

3. 根据 类名 获取元素对象

var elements = document.getElementsByClassName("类名");

4.获取body元素

document.body

2. 节点/元素相关方法

1. 获取子节点

var 子节点的伪数组 = 父亲.childNodes;

2. 获取子元素

var 子元素的伪数组 = 父亲.children;

3. 获取属性节点

var idNode = ul.getAttributeNode("id");

4. 获取下一个兄弟节点

var node = xxx.nextSibling;

5. 获取下一个兄弟元素

var ele = xxx.nextElementSibling;

6. 获取上一个兄弟节点

var node = xxx.previousSibling;

7. 获取上一个兄弟元素

var ele = xxx.previousElementSibling;

8. 追加子节点

father.appendChild(demo);
把一个节点放到父节点内部的最后

9. 插入子节点

father.insertBefore(demo,son);
把一个节点demo放到父节点内部 参考节点son的前面

10. 移除

father.removeChild(son);//移除子节点

11. 克隆

var clone = demo.cloneNode(true);

deep:深度,一般传入true:

12. 创建子元素
var ele=createElement("标签");

13. 获取第一个子元素

var frist = xxx.firstElementChild;
var frist = xxx.children[0];

获取第一个子节点:

firstChild

14. 获取最后一个子元素

var last = xxx.lastElementChild;
var last = xxx.children[xxx.children.length-1];

获取最后一个子节点:

lastChild

15. 获取父节点

var parent = xxx.parentNode;




3. 元素属性

1. src属性

img标签图片的路径

2.innerText属性

双标签的内部文本
textContent: 也是内部文本

3. innerhtml属性

双标签的内部HTML



4. className属性

样式

5. disabled

input标签禁用属性 disabled
取值:true/false

6. type

不同类型的input标签

7. value

标签的value:值

8. selected

下拉菜单 select 某一项被选中
取值:true/false

9. checked

checkbox 的选中状态: checked
取值:true/false

10. 自定义属性

1. 获取 任何标签中的属性都可以获取
console.log(box.getAttribute("a"));//可以获取没有规定的属性
console.log(box.getAttribute("id"));//也可以获取有规定的属性
2. 设置 任何标签中的属性都可以设置
box.setAttribute("b", "2");//可以设置没有规定的属性
box.setAttribute("class", "cls");//可以设置有规定的属性
3. 移除 任何标签中的属性都可以移除
box.removeAttribute("a");
box.removeAttribute("class");

11. 背景颜色

document.body.style.backgroundColor = "black"; // 一些简单的样式修改,通过style处理

12. 宽高

box.style.width = "200px";
box.style.height = "200px";

13. 背景图片

box.style.backgroundImage = "url(images/tiger.png)";

14. 隐藏盒子

this.style.display = "none";/*消失之后 不占位置*/
this.style.visibility = "hidden";/*消失之后 占位置*/

15. 变盒子的位置

this.style.left = "10px";
this.style.top = "10px";

left和top,需要注意添加绝对定位

16. 改变盒子的层级

this.style.zIndex = "10";

zIndex,需要注意添加绝对定位


4. 事件

1. 点击事件
ele.onclick=function(){};


注意在事件中,要获取当前点击的元素对象,都用this.

2. 鼠标悬浮,鼠标离开事件

1. 鼠标悬浮(经过)事件 ele.onmouseover = function(){};

2. 鼠标离开事件 ele.onmouseout = function(){};

3. 焦点事件

1. 鼠标失去焦点 ele.onblur = function(){};

2. 鼠标获取焦点 ele.onfocus = function(){};

4. 键盘事件

1. 键盘按下: ele.onkeydown = function(){};

2. 键盘抬起: ele.onkeyup = function(){};

5. 双击事件

ele.ondblclick = function(){};


5. 字符串相关方法:

1. 字符串的替换方法 : replace

xxx = xxx.replace(searchValue,replaceValue);

replace 特点: 只找第一个匹配的替换

2.字符串的搜索方法 indexOf()

xxx.indexOf(searchString);

查找searchString在xxx的第一个索引位置.

如果查找的是 不存在的字符串 : -1

如果查找的是 "" : 0

3. 删除左右空格: trim()

txt.value.trim() , 删除 字符串的左右空格