DOM操作

Literomantik
232 阅读3分钟

DOM简介

DOM节点

元素节点 element node
文本节点 text node
属性节点 attribue node

获取元素节点对象的方式

1. 获取指定ID节点

返回带有指定 ID 的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 id="h1"></h1>

<script>
    var re = document.getElementById("h1");
</script>
</body>
</html>


>>> re = <h1 id="h1">TEST</h1>
2. 获取指定标签元素

返回包含带有指定标签名称的所有元素的节点列表集合。（非数组）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>list_1</li>
    <li>list_2</li>
    <li>list_3</li>
</ul>
<script>
   // 注！就算整个文档中只有1个指定标签，也会返回一个列表集合
    var re = document.getElementsByTagName("li");
</script>
</body>
</html>

<!-- 返回的是一个节点列表集合 可以通过for循环遍历 -->
>>> re = HTMLCollection(3) [li, li, li]
          0: li
          1: li
          2: li
          length: 3
          __proto__: HTMLCollection
3. 获取指定类节点

返回包含带有指定类名的所有元素的节点列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li>item3</li>
</ul>
<script>
    var re = document.getElementsByClassName("item");
</script>
</body>
</html>

<!-- 返回的是一个节点列表集合 可以通过for循环遍历 -->
>>> re = HTMLCollection(2) [li.item, li.item]
          0: li.item
          1: li.item
          length: 2
          __proto__: HTMLCollection

DOM方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

1. 编程接口概念

  1. 可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

  2. 所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

  3. 方法是您能够执行的动作（比如添加或修改元素）。

  4. 属性是您能够获取或设置的值（比如节点的名称或内容）。

2. 操作属性值的方法
获取属性值

返回指定的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM方法</title>
</head>
<body>

<h3 id="h3" title="Hi">HELLO WORLD</h3>

<script>
    var oH = document.getElementById("h3");
  
  	// getAttribute()必须传一个值，填入的值就是要获取元素的属性名
    var title = oH.getAttribute("title");
  	
</script>
</body>
</html>


<!-- 获取"h3"的 title 属性值 -->
>>> title = "Hi"
设置属性值

把指定属性设置或修改为指定的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM方法</title>

    <style>
        .test{
            color: orange;
        }
    </style>
</head>
<body>

<h3 id="h3" title="Hi">HELLO WORLD</h3>

<script>
    var oH = document.getElementById("h3");
  
  	/*  
  		setAttribute(parame1, parame2) 必须传两个值
  		1.属性值
  		2.属性名
  	*/ 
    var title = oH.setAttribute("class", "test");
</script>
</body>
</html>

<!-- 如案例中所示：
			1.提前编写一个test类
			2.通过JS脚本给h3元素设置一个test类
			3.运行网页后字体会变成橘色
			4.通过JS动态添加一个类，查看源码的时候h3并没有一个test类
-->
3. 增删查改方法
创建节点

如需向 HTML DOM 添加新元素，必须创建一个元素节点，然后把它追加到已有的元素上。

创建节点createElement()要配合appendChild()使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  
</head>
<body>
  
<div class="test">
    <p id="p1">Hello world</p>
</div>

<script>
  
    var oDiv = document.getElementsByClassName("test")[0];
  
  	// 此时创建的新元素是没有任何内容的
    var newNode = document.createElement("p");
  
  	// 往新创建的元素添加文本和一个类属性
    newNode.innerHTML = "new Hello World";
	  newNode.setAttribute("class", "red");
  
  	// 最后用appendChild()追加到子节点中
    oDiv.appendChild(newNode);
</script>
</body>
</html>
插入节点

插入节点配合创建节点使用，有两个方法：

  • appendChild() 把新的子节点添加到指定节点，这个方法会把新插入的节点放在原有节点之后。（上面创建节点之后）。

  • insertBefore() 在指定的子节点前面插入新的子节点。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="test">
    <p id="p1">hello world</p>
</div>

<script>
    var oDiv = document.getElementsByClassName("test")[0];
    var oP = document.getElementById("p1");
    var newNode = document.createElement("p");
    newNode.innerHTML = "New Hello World";

  	/*
  		insertBefore(parame1, parame2)有两个值
  		1. 新的节点
  		2. 参考节点（放在哪个节点前面）
  	*/
    oDiv.insertBefore(newNode, oP);

</script>
</body>
</html>
删除节点

删除一个子节点removeChild()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>

<script>
    var oDiv = document.getElementById("test");
    var oP = document.getElementById("p1");
  
 		/*
 			removeChild(parame) 可以传一个参数
 			1.要删除的节点元素
 		*/
    oDiv.removeChild(oP);
</script>
</body>
</html>
替换节点

replaceChild() 替换一个子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="test">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>

<script>
    var oDiv = document.getElementById("test");
    var oP = document.getElementById("p1");
    var newNode = document.createElement("p");
    newNode.innerHTML = "p3";
		
  /*
  		replaceChild(parame1, parame2)有两个值
  		1. 新的节点
  		2. 要要替换的节点
  	*/
    oDiv.replaceChild(newNode, oP);
</script>
</body>
</html>
创建文本节点

创建文本节点有两种方法：

  • 第一种是用createTextNode() 方法创建文本节点，这种方法需要配合appendChild()方法把文本插入到元素节点中。

  • 第二种是直接调用innerHEML和innerText属性插入元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建文本节点</title>
</head>
<body>
    <p id="p1"></p>
    <p id="p2"></p>
<script>
    var oP1 = document.getElementById("p1");
    var oP2 = document.getElementById("p2");
		
  	// 用innerHTML属性插入文本可以解析浏览器标签
    oP1.innerHTML = "<a href='https://www.baidu.com/'>百度一下</a>"
  
  	// innerText不能解析浏览器标签
    oP2.innerText = "<a href='https://www.baidu.com/'>百度一下</a>"
</script>
</body>
</html>

[www.runoob.com/htmldom/htm…]:

DOM属性

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

1. 三个重要的属性
nodeName
  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document
nodeValue
  • 元素节点的 nodeValue 是 undefined 或 null
  • 属性节点的 nodeValue 是属性值
  • 文本节点的 nodeValue 是文本本身
nodeType
元素类型nodeType
元素1
属性2
文本3
注释8
文档9
代码实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM属性</title>
</head>
<body>

<div id="test" title="文本">TEST_TEXT <!-- 注释! --></div>

<script>
    // 获取元素节点
    var oDiv = document.getElementById("test");
  	/*
      >>> oDiv.nodeName  = DIV
      >>> oDiv.nodeValue = null
      >>> oDiv.nodeType  = 1
    */

    // 获取属性节点
    var attrNode = oDiv.attributes[0];
  	/*
  		>>> attrNode.nodeName  = id
			>>> attrNode.nodeValue = test
   	  >>> attrNode.nodeType  = 2
  	*/
 	  

    // 获取文本节点
    var textNode = oDiv.childNodes[0];
  	/*
  		>>> textNode.nodeName  = #text
			>>> textNode.nodeValue = TEST_TEXT
   	  >>> textNode.nodeType  = 3
  	*/


    // 获取元素节点
    var commentNode = oDiv.childNodes[1];
  	/*
  		>>> commentNode.nodeName  = #comment
			>>> commentNode.nodeValue = 注释!
   	  >>> commentNode.nodeType  = 8
  	*/


    // 文档节点
		/*
			>>> doucment.nodeName  = #document
			>>> doucment.nodeValue = null
   	  >>> doucment.nodeType  = 9
		*/
</script>
</body>
</html>
2. 节点对象常用属性
childNodes 获取（元素）子节点
firstChild 获取（元素）第一个子节点
lastChild 获取（元素）最后一个子节点
parentNode 获取（元素）父级节点
nextSibling 获取（元素）上一个同级节点
previousSibling 获取（元素）下一个同级节点
attributes 获取（元素）的属性节点

改变元素的样式

行内添加样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改样式</title>
</head>
<body>

<h2 id="title">Hello World</h2>

</body>

<script>
    var oTitle = document.getElementById("title");

  	/*
  		样式会添加到行内
  		style后面紧跟的是css的属性名
  		"=" 后面的属性值要用引号括起来，以字符串的形式
  	*/
    oTitle.style.color = "red";
    oTitle.style.textAlign = "center";
</script>
</html>
动态设置一个类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改样式</title>

    <style>
      	<!-- 提前写好一个类 -->
        .test{
            color: orange;
            text-align: center;
        }
    </style>
</head>
<body>

<h2 id="title">Hello World</h2>

</body>

<script>
    var oTitle = document.getElementById("title");
		
  	// 用setAttribute()方法元素设置类属性
    oTitle.setAttribute("class", "test");
</script>
</html>

事件

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。如需在用户点击某个元素时执行代码块。通常一个事件绑定一个事件函数。

鼠标事件
鼠标点击事件1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
</head>
<body>

<p onclick="hi();">BUTTON</p>

<script>
    function hi() {
        alert("Hi");
    }
</script>
</body>
</html>
鼠标点击事件2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
</head>
<body>

<button id="btn">BUTTON</button>

<script>
    /*
    	获取元素后 绑定一个点击事件
    */
    var btn = document.getElementById("btn");
    btn.onclick = function () {
      	// this就是元素本身
        this.alert("Hello");
    }
  
  	/*
  		或者可以这样写
  	*/
  	var red = function () {
        this.style.color = "red";
    }

    btn.onclick = red;
    
</script>
</body>


</html>
鼠标悬浮事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮事件</title>
</head>
<body>

<div class="box">
    <h3 id="title">Hi</h3>
</div>
</body>

<script>
    var title = document.getElementById("title");
  
  	/*
  		鼠标悬浮时 title 文本节点值为"Hello" 鼠标离开时为"Hi"
  	*/
    title.onmouseover = function () {
        this.innerText = "Hello";
    }

    title.onmouseout = function () {
        this.innerText = "Hi";
    }
</script>
</html>
表单事件
获取焦点事件

onfocus 事件在对象获得焦点时发生。

onfocus 通常用于 <input>, <select>, 和<a>.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>

<form>
    <p>
        <label for="user">用户</label>
        <input type="text" id="user" placeholder="用户名">
    </p>


    <p>
        <label for="pasw">密码</label>
        <input type="password" id="pasw" placeholder="密码">
    </p>
</form>

<script>
  	/*
  		当表单获得鼠标焦点时执行函数
  	*/
    var getUser = document.getElementById("user");
    getUser.onfocus = function () {
        alert("Hi");
    }
</script>
</body>
</html>
失去焦点事件

与onfocus 是一对，onblur 是失去焦点后的事件。

avatar
文章
阅读
粉丝