第八章：DOM模型二

最新推荐文章于 2023-06-26 22:38:08 发布

我的艺术就是派大星

最新推荐文章于 2023-06-26 22:38:08 发布

阅读量502

点赞数

分类专栏： H5 开发基础

本文链接：https://blog.csdn.net/qq_44627608/article/details/103233475

版权

H5 开发基础专栏收录该内容

13 篇文章 3 订阅

订阅专栏

在这里插入图片描述
HTML 文档中的所有内容都是节点：

① 整个文档是一个文档节点；
② 每个 HTML 元素是元素节点；
③ HTML 元素内的文本是文本节点；
④ 每个 HTML 属性是属性节点；
⑤ 注释是注释节点；

获取DOM节点

<body>
	<div>
		<h1>标题1</h1>
		<a href="1.jpg" id="list">我是超链接</a>
	</div>
</body>
 获取 DOM 节点
 - 元素节点 var list = document.getElementById("list")
 - 属性节点 var href = list.getAttributeNode("href")
 - 文本节点 var text = list.firstChild

DOM 树中每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeType （节点类型）
nodeName（节点名称）
nodeValue （节点值）

nodeType 属性

nodeType 属性可区分节点的类型

元素节点的 nodeType 返回值为 1
属性节点的 nodeType 返回值为 2
文本节点的 nodeType 返回值为 3
nodeType 是只读的

<body>
    <div>
        <h1>我是标题</h1>
        <a href="http://www.baidu.com" id="link">我是超链接</a>
    </div>
    <script>
    	//nodeType 是只读的,通过获取数值判断节点类型
    获取元素节点
    var link = document.getElementById('link');
    console.log(link.nodeType);

    获取属性节点
    var attr = link.getAttributeNode("href");
    console.log(attr.nodeType);

    获取文本节点
    var text = link.firstChild;
    console.log(text.nodeType);
    </script>
</body>

nodeName属性

nodeName 属性依据节点的类型返回其名称

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
nodeName 是只读的
nodeName 返回标签名为大写标签名

<body>
    <div>
        <h1>我是标题</h1>
        <a href="http://www.baidu.com" id="link">我是超链接</a>
    </div>
    <script>
    // nodeName 是只读的

    //元素节点的 nodeName 与标签名相同,且返回值为大写的字符串
    var link = document.getElementById('link');
    console.log(link.nodeName);

    //属性节点的 nodeName 与属性名相同
    var attr = link.getAttributeNode("href");
    console.log(attr.nodeName);

    //文本节点的 nodeName 始终是 #text
    var text = link.firstChild;
    console.log(text.nodeName);
    </script>
</body>

nodeValue 属性

nodeValue 属性返回或设置当前节点的值

元素节点的 nodeValue 是 undefined 或 null
属性节点的 nodeValue 是属性值
文本节点的 nodeValue 是文本本身
DOM 处理中的常见错误是希望元素节点包含文本节点
例如 <title》DOM 教程《/title>，元素节点《 title>，包含值为 “DOM 教程” 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值。

<body>
    <div>
        <h1>我是标题</h1>
        <a href="http://www.baidu.com" id="link">我是超链接</a>
    </div>
    <script>
    // nodeName 是可读可写的

    //元素节点的 nodeValue 是 undefined 或 null
    var link = document.getElementById('link');
    console.log(link.nodeValue);

    //属性节点的 nodeValue 是属性值
    var attr = link.getAttributeNode("href");
    console.log(attr.nodeValue);

    //文本节点的 nodeName 始终是 #text
    var text = link.firstChild;
    console.log(text.nodeValue);

    //修改文本内容
    //text.nodeValue="我是百度超链接";

    
    </script>
</body>

在这里插入图片描述

添加元素与文本节点

第一步：生成一个 DOM 节点

生成一个元素节点： document.createElement( Element )
通过指定标签名创建一个元素节点，返回一个节点对象。
例：var btn=document.createElement(“button”);
- 生成一个文本节点：document.createTextNode( text )
  创建文本节点，返回文本节点对象。
  例：var text=document.createTextNode( “hello!” );

第二步：把生成的节点作为某一个节点的子节点进行添加

向父节点的末尾添加：node.appendChild( newNode )
例：var btn=document.createElement(“button");
document.body. appendChild( btn );
- 在已有子节点前插入一个新的子节点：node.insertBefore( new, old )
  例：var btn=document.createElement(“button");
  document.body.insertBefore( btn , null );

    <style>
        body {padding: 150px;}
        td {width: 110px;}
    </style>
</head>

<body>
    <script>
    //创建7行5列
    var table = document.createElement("table");
    table.setAttribute("cellSpacing", "0");
    table.setAttribute("border", "1");
    document.body.appendChild(table);

    for (var x = 0; x < 7; x++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (var y = 0; y < 5; y++) {
            var td = document.createElement("td");
            tr.appendChild(td);
            if (y == 0) {
                var button = document.createElement("button");
                button.innerHTML = "点击我删除行 "+x;
                td.appendChild(button);
                //为按钮添加事件
                button.setAttribute("onclick", "removeTr(this)");
                function removeTr(that){
                    //通过button找到所在的 tr 以及 tr 的父
                    var tr=that.parentNode.parentNode;
                    var trParent=tr.parentNode;
                    trParent.removeChild(tr);
                }
            }
        }
    }
    </script>
</body>

删除元素节点或文本节点

从子节点列表中删除某个节点：
parentNode.removeChild(childNode)

例：通过父节点删除本节点：
myParent.removeChild( mySelfNode )
通过自己删除本节点：
mySelfNode.parentNode.removeChild( mySelfNode )

<body>
    <div>
        <h1>请选择</h1>
        <p>我喜欢的水果:</p>
        <ul id="fruit">
            <li>百香果</li>
            <li>山竹</li>
            <li id="three">火龙果</li>
            <li>猕猴桃</li>
        </ul>
    </div>
    <script>
    var fruit = document.getElementById('fruit');
    var three = document.getElementById('three');

    //通过父节点删除本 three 节点,父节点直接获取
    fruit.removeChild(three);

    //通过自己删除本 three 节点，父节点间接获取
    three.parentNode.removeChild(three);
    </script>
</body>

修改一个元素节点，即用新节点替换某个子节点
oldNode.parentNode.replaceChild ( newNode, oldNode )
源节点，的父节点，的替换子节点（新节点，旧节点）

    <style>
        body {padding: 150px;}
        li {list-style: none;}
    </style>
</head>

<body>
    <ul id="ls">
        <li>苹果</li>
        <li>香蕉</li>
        <li>西瓜</li>
    </ul>
    <script>

    //第一步：创建新的节点
    var txtnode = document.createTextNode("菠萝");

    //第二步：找到旧的节点——获取需要修改的节点及其父节点
    var item = document.getElementById("ls").children[0]; //<li>苹果</li>
    var oldtxtnode = item.childNodes[0]; //苹果

    //第三步：站在父节点的角度，使用replaceChild(新,旧)函数来替换
    item.replaceChild(txtnode, oldtxtnode);
    </script>
</body>

DOM 节点替换过程
创建新的节点
找到旧的节点
站在父节点的角度，使用 replaceChild(新,旧) 方法来替换在这里插入图片描述

    <style>
        td {
            width: 200px
        }
    </style>
</head>
<body>
    <table border="1" cellSpacing="0" id="tb">
        <tr>
            <td>
                <button>点我删除行0</button>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>点我删除行1</button>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>点我删除行2</button>
            </td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>
                <button>点我删除行3</button>
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
<script>
    var tb = document.getElementById("tb");
    var btnList = tb.getElementsByTagName("button");
    for(var i = 0; i < btnList.length; i++) {
        /*在事件的回调函数中，获取到的是遍历结束时的i值  */
        /*在事件的回调函数中，this指向当前触发事件的DOM对象*/
        btnList[i].onclick = function() {
            var trNode = this.parentNode.parentNode;
            trNode.parentNode.removeChild(trNode);
        }
    }
</script>

HTML DOM

定义了访问和操作 HTML 文档的方法
HTML 元素对象化
网页中的每个元素都看作一个对象

元素属性为元素节点对象的属性
元素事件属性为元素节点对象的方法

对象： Image, Table, Form, Input, Select ………

核心 DOM 获取节点属性
：node.getAttribute(attrName)
node.id / classname /target……

<body>
    <a id="aa" class="bb" href="8-1.html" target="_blank">跳转</a>
    <script>
	    var attrName = document.getElementById('aa');
	    console.log(attrName.getAttribute("id"));
	    console.log(attrName.getAttribute("class"));
        console.log(attrName.getAttribute("href"));
        console.log(attrName.href);
        console.log(attrName.target);
        console.log(attrName.getAttribute("target"));        
    </script>
</body>

HTML DOM 获取节点属性
：node.attrName

img

创建图片节点对象
var img = new Image();
等价于 document.ceateElement( “img” )

增删改查图片节点对象属性
img.src
img.width
img.height
…

    <style>
        body{padding:150px;}
        #imgArear {
            margin-top:10px;
            width: 910px;
            height: 400px;
            border: 1px solid;
        }
    </style>
</head>
<body>
<form>
    <input type="button" value="添加图片" onclick="addImg();"/>
</form>
<div id="imgArear"></div>
<script>
    function addImg() {
        //1. 生成1个图片节点
        //var img = document.createElement("img");
        var img = new Image();

        //2. 为该图片节点设置必要属性（图片路径、图片宽度和高度)
        img.src = "images/dog.jpg";
        img.width = 300;
        img.height = 300;
        
        //3. 插入该图片为id="imgArear"的div节点的孩子
        var div = document.getElementById("imgArear");
        div.appendChild(img);
    }   
</script>

Table

Table 对象
在 HTML 文档中

标签每出现一次，一个 Table 对象就会被创建
var table = document.ceateElement( “table” )
常用属性和方法

table.rows —— 返回包含表格中所有 tr 元素的集合
table.createCaption() —— 为表格创建一个 caption 元素
table.insertRow(index) —— 在表格中的指定位置插入一个空的 tr 元素
table.deleteRow(index) —— 从表格删除指定位置的行

TableRow 对象
在 HTML 文档中出现一个标签，就会创建一个 TableRow 对象
var tr = table.insertRow()
常用属性和方法

tr.cells —— 返回表格行中所有 td 或 th 元素的集合
tr.insertCell(index) —— 在一行的指定位置插入一个空的 td 元素
tr.deleteCell(index) —— 删除表格行中的指定 td 元素

TableCell 对象

在 HTML 文档中出现一个标签，就会创建一个 TableCell 对象
var td = tr.insertCell()
TableHeader 对象
在 HTML 文档中出现一个标签，就会创建一个 TableHeader 对象
var th = document.createElement(“th”);

<!--插入表格-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
	<script>
 		var tb=document.createElement("table");
 		tb.border="1";
 		tb.cellSpacing="0";
 		document.body.appendChild(tb);
 		for(var i=0;i<6;++i)
 		{
 			var trobj=tb.insertRow()
 			for(var j=0;j<6;++j)
 			{
 				trobj.insertCell()
 			}
 		}
	</script>
</html>

小意思的东西
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            height: 400px;
            width: 1000;
            border: 1px solid red;
            margin: 0 auto;
        }
        img {
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="container">
        <img src="./2.jpg" id="img1"/>
    </div>
    <button id="appendChild">appendChild</button>
    <button id="insertBefore">insertBefore</button>
    <button id="removeChild">removeChild</button>
</body>
<script>
    var appendChild = document.getElementById("appendChild");
    appendChild.onclick = function() {
        var imgNode = document.createElement("img");
        var container = document.getElementById("container");
        imgNode.src = "./1.jpg";
        /*
            parentNode.appendChild(childNode)
            向parentNode节点对象标记内部最后的位置
            添加childNode
        */
        container.appendChild(imgNode);
    }
    
    var insertBefore = document.getElementById("insertBefore");
    var img2 = document.getElementsByTagName("img")[0];
    insertBefore.onclick = function(e) {
        e.stopPropagation();
        var container = document.getElementById("container");
        var img1 = document.createElement("img");
        img1.src = "./1.jpg";
        container.insertBefore(img1, img2);
    }

    var removeChild = document.getElementById("removeChild");
    removeChild.onclick = function() {
        var img1 = document.getElementById("img1");
        // var container = document.getElementById("container");
        // container.removeChild(img1);
        img1.parentNode.removeChild(img1);
    }
</script>
</html>