DOM（文档对象模型）

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
    document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

改变CSS样式

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">我的标题 1</h1>

<button type="button" onclick ="document.getElementById('id1').style.color = 'red' ">
		标题变红
</button>

</body>
</html>

JavaScript HTML DOM 事件

JavaScript 程序可以响应网页上发生的事件（比如当用户点击鼠标时、当网页已加载时、当图片已加载时、当鼠标移动到元素上时、当输入字段被改变时、当 HTML 表单被提交时、当用户触发按键时等）：

onclick

onmouseover / onmouseout

onfocus / onchange

onload / onunload

addEventListener()

可以为元素添加(多个)事件处理程序。

element.addEventListener(event, function, useCapture);

useCapture：false/true。决定事件处理顺序由内层元素到外层元素或相反。

removeEventListener(evevt, function) 方法删除已通过 addEventListener() 方法定义的事件处理程序。

实例

element.addEventListener("click", myFunction);

    function myFunction() {
        alert ("Hello World!");
    }
//如果事件处理函数有参数
element.addEventListener("click", function(){ myFunc(p1, p2); });

element.addEventListener("click", function(){ alert("Hello World!"); });

在 HTML DOM 节点树中导航

顶端节点被称为根（根节点）。

每个节点都有父节点（除了根）。

节点可以拥有一定数量的子节点。

拥有相同的父节点的是同胞(兄弟或姐妹)

实例

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <h1>example</h1>
        <p>Hi!</p>
    </body>
</html>

<html> 是根节点，没有父节点

<html> 是 <head> 和 <body> 的父节点

<head> 是 <html> 的第一个子节点

<body> 是 <html> 的最后一个子节点

<head>

有一个子节点：<title> <title>

有一个(文本)子节点："标题"

<body> 有两个子节点：<h1> 和 <p>

<h1> 有一个(文本)子节点："example"

<p> 有一个(文本)子节点："Hi!"

<h1> 和 <p> 是同胞

节点列表

getElementsByTagName(tag) 方法返回节点列表。节点列表是一个节点数组。length 属性定义节点列表中节点的数量。

使用节点属性在节点之间导航

通过 JavaScript，可以使用以下节点属性在节点之间导航：

parentNode

childNodes[nodenumber]

firstChild

lastChild

nextSibling

previousSibling

注意：如果对应的节点不存在，结果是null。

遍历 DOM 树

添加/删除 HTML 元素

document.createElement(tag) 创建 HTML 元素 document.createTextNode(text)

element.appendChild(node) 添加 HTML 元素 element.insertBefore(newChildNode,childNode)

element.removeChild(node) 删除 HTML 元素 element.remove()

element.replaceChild(newNode, oldNode) 替换 HTML 元素

获取节点的"值"

节点的 nodeValue

元素节点的 nodeValue 是 undefined

文本节点的 nodeValue 是文本

属性节点的 nodeValue 是属性值

实例

<body>
    <h1 id="first">标题</h1>
</body>

document.getElementById("id01").innerHTML; document.getElementById("id01").firstChild.nodeValue; document.getElementById("id01").childNodes[0].nodeValue;

可以通过以上几种表达获得<h1>元素的内容。

创建添加新 HTML 元素（节点）

如需向 HTML DOM 添加新元素，必须先创建这个元素（元素节点），然后将其追加到已有元素。

实例

<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另外一个段落。</p>
</div>

<script>
	var para = document.createElement("p");
	var textnode = document.createTextNode("这是新文本。");
	para.appendChild(textnode);
//创建元素节点
	var parent = document.getElementById("div1");
	parent.appendChild(para);
//追加该元素节点到已有元素
</script>

HTML DOM replaceChild() 方法

定义和用法： replaceChild() 方法用新节点替换某个子节点。这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

语法：node.replaceChild(newnode, oldnode)

返回值：被替换的节点（Node 对象）。

appendChild(), appendBefore() 返回新添加的节点。 removeChild(), remove() 返回被删除的节点。 cloneNode() 方法返回调用该方法的节点的克隆体。

默认情况下，节点的nodeName和tagName属性值是HTML标签名，例如P。

event 对象

DOM 中的所有事件对象都基于 Event 对象。

event 对象的属性和方法：

event.target 返回触发事件的元素。

event.type 返回事件名称。

JavaScript console.log() 方法

<!DOCTYPE html>
<html>
<body>

<p>按键盘上的 F12 可在控制台视图中查看消息。</p>

<script>
console.log("Hello world!");
</script>

</body>
</html>

应用实例

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>
            四个按钮
        </title>
        <style>
            #div1{
                margin:0 auto;
                width: 300px;
                height: 300px;
                border:2px solid;
                background-color: beige;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <script>
            function moveUp(){
                var click = event.target;
                click.style.color = "green";
                var all = document.getElementById('div1');
                var n = all.children.length;
                for(var i = n-1; i>0; i--){
                    var tmp1 = all.children[i].cloneNode(true);
                    all.insertBefore(tmp1 , all.children[i-1]);
                    all.removeChild(all.children[i+1]); 
                }
            }

            function moveDown(){
                var click = event.target;
                click.style.color = "green";
                var all = document.getElementById('div1');
                var n = all.children.length;
                var tmp2 = all.children[0].cloneNode(true);
                all.insertBefore(tmp2 , all.children[n]);
                all.removeChild(all.children[0]);
           }
            function append(){
                var click = event.target;
                click.style.color = "green";
                var all = document.getElementById("div1")
                var frm = document.createElement("form");
                var inp = document.createElement("input");
                inp.type = "text";
                frm.appendChild(inp);
                var BtnOk = document.createElement("input");
                BtnOk.type = "button";
                BtnOk.value = "Ok";
                BtnOk.id = "ok";
                var Ok = document.getElementById("ok");
                frm.appendChild(BtnOk);
                all.appendChild(frm);
                ok.onclick = function(){
                    var node = document.createElement("p");
                    node.innerHTML = frm.elements[0].value;
                    all.replaceChild(node,frm);
                } 
           }
            function remove(){
                var click = event.target;
                click.style.color = "green";
                var all = document.getElementById('div1');
	            var n = all.children.length;
                all.removeChild(all.children[n-1]);
            }
        </script>
        <div id = "div1">
            <p id = "p1">先有鸡</p>
            <p id = "p2">先有蛋</p>
        </div>
        <button onclick = "moveUp()">moveup</button>
        <button onclick = "moveDown()">movedown</button>
        <button onclick = "append()">append</button>
        <button onclick = "remove()">remove</button>
    </body>
</html>

效果

原本

点击moveup按钮后

点击movedown按钮后

点击append按钮后

点击remove按钮后

tanliqiu2

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM（文档对象模型）

目录简单介绍HTML DOM 节点节点树节点间的层级关系HTML DOM 对象、属性、方法JavaScript与HTML DOMJavaScript 代码访问页面上的元素改变 HTML 元素/属性值添加/删除 HTML 元素查找 HTML 元素改变元素的属性值改变CSS样式JavaScript HTML DOM 事件addEventListener()实例在 HTML DOM 节点树中导航实例节点列表使用节点属性在节点之间导航遍历 DOM 树添加/删除 HTML 元素获取节点的"值"节点的 node
复制链接

扫一扫