javascript DOM基礎內容/操做步驟

時間 2019-11-29

標籤 javascript dom 基礎內容步驟欄目 JavaScript 简体版

原文原文鏈接

Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問

一般經過js能夠對html元素進行操做，首先就要先找到這個元素；javascript

經過使用 getElementById("id") 方法　　//id標籤只有一個
經過使用 getElementsByTagName(" ") 方法　　 //根據標籤名找，找到的是數組
經過使用 getElementsByClassName(" ") 方法 // 根據classname，找到的數組
經過使用 getElementsByName(" ") 方法 // 根據name找，找打的是數組 zhu:括號內加引號

Window 對象屬性和屬性 http://www.runoob.com/jsref/obj-window.htmlhtml

http://www.w3school.com.cn/example/hdom_examples.aspjava

<body onload="函數()"> 在body加載完再調用這個函數node

document操做：數組

一、找元素 get Element、、、
二、操做內容 innerHtml　　app

　　非元素內容屬性：. innerHTML 設置或返回元素的內容 //例：documentGetmentById("id").innerHTML （元素內的內容是：）=" "dom

　　表單元素內容屬性：. valueide

　　元素的連接：.href 網頁跳轉形式：.target~~函數

　　圖片地址.src this

<script>
function changeLink(){
    document.getElementById('myAnchor').innerHTML="金百度";
    document.getElementById('myAnchor').href="http://www.baidu·com";
    document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
 
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="修改連接">
 
</body>

連接和跳轉栗子

三、操做屬性：

　　設置setAttribute(「屬性」，「屬性值」)

　　獲得 getAttribute(「屬性名」) --返回屬性值

　　刪除removeAttribute(「屬性名」)

四、做用樣式：

　　元素.style.樣式 = "";

<script type="text/javascript">
function on(obj){
        obj.style.height = '200px';
        obj.style.width = "200px";
    }
    </script>    
    >
</head>
<body>
<div id="qq" style="width: 100px; height: 100px; background-color: red;" onClick="on(this)"></div>

做用樣式栗子

五、操做元素（建立標籤，刪除標籤）

建立元素 document.createElement("標籤名")
追加元素父元素.appendChild("子元素對象")
刪除元素元素對象.remove()

插入元素父元素.insertBefore("子元素"，「在誰以前」)、、跟數組和用，實現插入位置的控制

　　var lii = document.getElementById("id")

　　ul(父元素).insertBefore(lii,id[0]) // 把新的li插入到ul的最前面

document.createTextNode("這是新段落。"

節點

var b = a.nextSibling，找a的下一個同輩元素，注意包含空格；

var b = a.previousSibling，找a的上一個同輩元素，注意包含空格；

var b = a.parentNode，找a的上一級父級元素；

var b = a.childNodes，找出來的是數組，找a的下一級子元素；

var b = a.firstChild，第一個子元素，lastChild最後一個，childNodes[n]找第幾個；

alert(nodes[i] instanceof Text); 判斷是否是文本，是返回true，不是返回flase，用if判斷它的值是否是flase，能夠去除空格。

時間控制：

setInterval( 函數，時間)：按照指定的週期（以毫秒計）來調用函數或計算表達式。

setTimeout()：在指定的毫秒數後調用函數或計算表達式。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。