DOM简单梳理

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树

JavaScript 可以通过DOM创建动态的 HTML：

    JavaScript 能够改变页面中的所有 HTML 元素

    JavaScript 能够改变页面中的所有 HTML 属性

    JavaScript 能够改变页面中的所有 CSS 样式

    JavaScript 能够对页面中的所有事件做出反应一：查找

1.直接查找：

直接查找分为三种:

根据ID进行查找

 

//document.getElementById('id名')// var idEle=document.getElementById('1');

 

根据类名进行查找：

//注意，Elements，所以会得到一个数组，可以用索引取值// document.getElementsByClassName('类名');

根据标签名进行查找：

//同类名，获得的是一个数组// document.getElementsByTagName ('标签名');

2.间接查找：

间接查找就是先通过直接查找，找到一个元素之后，通过该元素对和它有关系的元素进行查找

//查找id为1的元素的父节点// document.getElementById('1').parentElement； 除了父节点标签元素parentElement ，还有下面的语法： children 所有子标签 firstElementChild 第一个子标签元素 l astElementChild 最后一个子标签元素 nextElementSibling 下一个兄弟标签元素 previousElementSibling 上一个兄弟标签元素2.节点操作

创建节点

语法：

createElement(标签名)

示例：

var divEle = document.createElement("div");

添加节点

语法：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

示例：

var imgEle=document.createElement("img"); imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg"); var d1Ele = document.getElementById("d1"); d1Ele.appendChild(imgEle);

删除节点：

语法：

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

替换节点：

语法：

somenode.replaceChild(newnode, 某个节点);

属性节点

获取文本节点的值：

var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTML

设置文本节点的值：

var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") divEle.getAttribute("age") divEle.removeAttribute("age") // 自带的属性还可以直接.属性名来获取和设置 imgEle.src imgEle.src="..."

获取值操作

语法：

elementNode.value

适用于以下标签：

.input   .select.textarea  var iEle = document.getElementById("i1"); console.log(iEle.value); var sEle = document.getElementById("s1"); console.log(sEle.value); var tEle = document.getElementById("t1"); console.log(tEle.value);

class的操作

className 获取所有样式类名(字符串) classList.remove(cls) 删除指定类 classList.add(cls) 添加类classList.contains(cls) 存在返回true，否则返回falseclassList.toggle(cls) 存在就删除，否则添加

指定CSS操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin obj.style.width obj.style.left obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

常用事件

onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 // 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onselect 在文本框中的文本被选中时发生。 onsubmit 确认按钮被点击，使用的对象是form。

 绑定方式：

方式一：

<div id="d1" οnclick="changeColor(this);">点我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>

注意：

this是实参，表示触发事件的当前元素。

函数定义过程中的ths为形参。

方式二：

<div id="d2">点我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.οnclick=function () { this.innerText="呵呵"; } </script>  

 

转载于:https://www.cnblogs.com/98WDJ/p/10677710.html