组团学
学习方向
登录/注册

DOM节点操作

阅读 (407)

一、获取标签(元素)节点

  • 界面准备
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取标签(元素)节点</title>
	</head>
	<body>
        <div id="idDiv"></div>
        
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        <div class="classDiv"></div>
        
        <input type="text" name="inputText">
        <input type="text" name="inputText">
        <input type="text" name="inputText">
    
    		<ul id="list">
            <li id="l1" class="test">javascript</li>
            <li id="l2">javascript</li>
            <li id="l3" class="test">javascript</li>
            <li id="l4">javascript</li>
        <li>javascript</li>
    </ul>
	</body>
</html>

  • getElementById()

    根据元素id获取元素节点

    var jsDiv = document.getElementById("idDiv");
console.log(jsDiv);
console.log(typeof jsDiv);

  • getElementsByClassName()

    获取相同class属性的元素节点列表，此方法不支持IE8以下

    var jsDivs = document.getElementsByClassName("classDiv");
for (var i = 0; i < jsDivs.length; i++) {
		console.log(jsDivs[i]);
}

  • getElementsByTagName()

    根据标签名来获取元素节点的集合

    var jsDivs = document.getElementsByTagName("div");
for (var i = 0; i < jsDivs.length; i++) {
		console.log(jsDivs[i]);
}

  • getElementsByName()

    根据name属性值来获取元素节点的集合

    var jsDivs = document.getElementsByName("inputText");
for (var i = 0; i < jsDivs.length; i++) {
		console.log(jsDivs[i]);
}

  • querySelector()

    css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null

    var jsLi = document.querySelector("#list li:nth-child(3)");
console.log(jsLi);

  • querySelectorAll()

    css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

    var jsLis = document.querySelectorAll(".test")
for (var i = 0; i < jsLis.length; i++) {
    console.log(jsLis[i]);
}

二、获取属性节点

页面准备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取属性节点</title>
	</head>
	<body>
        <input type="text"  id="in" placeholder="请留下你的大名!" my="我的">
	</body>
</html>

  • 官方定义的属性

    • 获取属性值

      格式：元素节点.属性名;

      var jsInput = document.getElementById("in");
console.log(jsInput);

var typeNode = jsInput.type;
console.log(typeNode);
var placeholderNode = jsInput.placeholder;
console.log(placeholderNode);

    • 修改属性值

      格式：元素节点.属性名 = 新的属性值;

      jsInput.placeholder = "换新";

  • 自定义属性

    • 获取属性值

      格式：元素节点.getAttribute("属性名");

    var myNode = jsInput.getAttribute(“my”);
    console.log(myNode);

    
- 修改属性值

  格式：`元素节点.setAttribute("属性名", "新的属性值");`

  ```js
  jsInput.setAttribute("my", "sunck");
  console.log(jsInput);
  ```

- 移除元素节点中的某个属性节点(某些低版本浏览器不支持)

格式：`元素节点.removeAttribute("属性名");`

```js
jsInput.removeAttribute("my");
console.log(jsInput);
    • 注意：该方法不仅可以获取自定义属性，也可以处理官方定义的属性

三、获取文本节点

准备页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取文本节点</title>
	</head>
	<body>
      	<div id="box">
			我是个盒子
		</div> 
        <script type="text/javascript">
            var jsDiv = document.getElementById("box");
        </script>
	</body>
</html>

获取：

  • 元素节点.innerHTML

    从对象的开始标签到结束标签的全部内容，不包括本身Html标签

    var inner = jsDiv.innerHTML;
console.log(inner);
console.log(typeof inner);

  • 元素节点.outerHTML

    除了包含innerHTML的全部内容外，还包含对象标签本身

    var outer = jsDiv.outerHTML;
console.log(outer);
console.log(typeof outer);

  • 元素节点.innerText

    从对象的开始标签到结束标签的全部的文本内容

    var text = jsDiv.innerText;
console.log(text);
console.log(typeof text);

修改：

jsDiv.innerHTML = "<p>我才是</p>";
console.log(jsDiv);

四、节点的常用属性

准备界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点的常用属性</title>
        <style type="text/css">	
            #box1{
                width: 200px;height: 200px;background-color: red;
            }
            #box2{
                width: 200px;height: 200px;background-color: green;
            }
            #box3{
                width: 200px;height: 200px;background-color: yellow;
            }
        </style>        
	</head>
	<body>
        <div id="box1">
            <p>我是第一个P</p>
            <p>我是第二个P</p>
            <p>我是第三个P</p>
            <p>我是第四个P</p>
        </div>
        <div id="box2"></div>
        <div id="box3"></div>
        <input id="put" type="text" name="in" placeholder="sunck is a good man">        
	</body>
</html>
  • 节点共有的属性

节点属性nodeName、nodeType、nodeValue.png

var jsDiv1 = document.getElementById("box1");
console.log(jsDiv1);
console.log(jsDiv1.nodeName);
console.log(jsDiv1.nodeType);
console.log(jsDiv1.nodeValue);

  • 节点层次关系属性

    • 获取当前元素节点的所有的子节点

      var childNodesArray = jsDiv1.childNodes;
console.log(childNodesArray);

    • 获取当前元素节点的第一个子节点

      var firstChildNode = jsDiv1.firstChild;
console.log(firstChildNode);

    • 获取当前节点的最后一个子节点

      var lastChildNode = jsDiv1.lastChild;
console.log(lastChildNode);

    • 获取该节点的文档的根节点，相当于document

      var rootNode = jsDiv1.ownerDocument;
console.log(rootNode);

    • 获取当前节点的父节点

      var parentNode = jsDiv1.parentNode;
console.log(parentNode);

    • 获取当前节点的前一个同级节点

      var jsDiv2 = document.getElementById("box2");
var previousNode = jsDiv2.previousSibling;
console.log(previousNode);

    • 获取当前节点的后一个同级节点

      var nextNode = jsDiv2.nextSibling;
console.log(nextNode);

    • 获取当前节点的所有的属性节点

      var jsInput = document.getElementById("put");
var allAttributesArray = jsInput.attributes;
console.log(allAttributesArray);

五、节点的动态操作

页面准备

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DOM节点动态操作</title>
	<style type="text/css">
		#box{
			width: 300px;height: 300px;background-color: yellow}
		#box1{
			width: 100px;height: 100px;background-color: red}
		#box2{
			width: 50px;height: 50px;background-color: blue}
	</style>
</head>
<body>
	<div id="box">
		<p>1</p>
		<p>2</p>
	</div>
</body>
</html>

  • 创建元素节点

    var jsDiv1 = document.createElement("div");
jsDiv1.id = "box1";
console.log(jsDiv1);

  • 将新节点添加到父节点的子节点列表的末尾上

    格式：父节点.appendChild(子节点);

    document.body.appendChild(jsDiv1);

  • 将新节点添加到父节点的某个子节点的前面

    格式：父节点.insertBefore(新节点, 子节点)

    var jsP = document.createElement("p");
jsP.innerHTML = "关注我";

var jsD = document.getElementById("box");
jsD.insertBefore(jsP, jsD.childNodes[3]);
console.log(jsD);

  • 创建文本节点

    var jsStr = document.createTextNode("什么");
console.log(jsStr)

  • 添加文本节点

    var js2P = jsD.childNodes[1];
js2P.appendChild(jsStr);

  • 替换节点

    格式：父节点.replaceChild(新节点, 子节点);

    说明：将父节点中的某个子节点替换成新节点

    var jsDiv2 = document.createElement("div");
jsDiv2.id = "box2";
jsDiv1.parentNode.replaceChild(jsDiv2, jsDiv1);

  • 复制节点

    //只复制本身
var jsD1 = jsD.cloneNode();
console.log(jsD1);
//复制本身和子节点
var jsD2 = jsD.cloneNode(true);
console.log(jsD2);

  • 删除节点

    格式：父节点.removeChild(子节点);

    说明：删除父节点下的对应子节点

    jsDiv2.parentNode.removeChild(jsDiv2);

  • 参照物父元素（offsetParent）

    • 当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的
    • 当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的
    • 当某个元素及其父元素都进行CSS定位时，则返回距离最近的使用了CSS定位的元素
    var temp = jsD.childNodes[1].offsetParent;
console.log(temp);
需要 登录 才可以提问哦
头像
：
回复