跳到主要內容

javascript DOM 教學

https://www.w3schools.com/js/js_htmldom.asp

講的蠻細的

Document Object Model
Javascript可以更換這個html的所有elements、attributes、style
Javascript可以移除html現有的elements和attributes
Javascript可以在html加上新的elements和attributes
Javascript可以反應在html上現有的event
Javascript可以在html頁面上新增事件

=====

將HTML的element視為物件，就會有propereties,methods,events

property => value, changing the content of an HTML element
method => action, add or delete an HTML element
innerHTML is a property
getElementByID is a method

 =====

document.appendChild(element) 常用
document.getElementById(id).onclick = function(){code}  => event

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.


=====

var x = document.querySelectorAll("p.intro");  => CSS Selector

=====

document.getElementById("p1").innerHTML = "New text!";
document.getElementById("myImage").src = "landscape.jpg";

=====

document.getElementById(id).style.property = new style
document.getElementById("p2").style.color = "blue";

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>   =>  events

=====

function myMove() {
    var elem = document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
        } else {
            pos++; 
            elem.style.top = pos + 'px'; 
            elem.style.left = pos + 'px'; 
        }
    }
}     => Animation

=====

  • When a user clicks the mouse
  • When a web page has loaded
  • When an image has been loaded
  • When the mouse moves over an element
  • When an input field is changed
  • When an HTML form is submitted
  • When a user strokes a key
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
document.getElementById("myBtn").onclick = displayDate;

onload,onchange,onmouseover,onmousedown,onmouseup,onclick

=====

document.getElementById("myBtn").addEventListener("click", displayDate);

element.addEventListener(event, function, useCapture);
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});


Event Bubbling or Event Capturing?

=====

Node Tree

The nodeValue Property

The nodeValue property specifies the value of a node.
  • nodeValue for element nodes is undefined
  • nodeValue for text nodes is the text itself
  • nodeValue for attribute nodes is the attribute value
=====

var element = document.getElementById("div1");
element.appendChild(para);

=====

HTML DOM Node List


=====

標籤：

留言

張貼留言

這個網誌中的熱門文章

collection view part6 swift

preselect collectionview https://stackoverflow.com/questions/45610785/how-to-preselect-and-highlight-a-cell-from-a-uicollectionview https://hackernoon.com/uicollectionviewcell-selection-made-easy-41dae148379d if collectionview allow multiple selection remeber add this, cell item could be Deselect collectionView. selectItem (at: indexPath, animated: true , scrollPosition: . top ) https://stackoverflow.com/questions/15330844/uicollectionview-select-and-deselect-issue save indexpath userdefault https://stackoverflow.com/questions/34804294/how-to-save-nsindexpath-locally https://stackoverflow.com/questions/37001643/how-to-add-nsindexpath-to-nsuserdefaults-in-swift navigation presneted viewcontroller dismiss https://stackoverflow.com/questions/31205002/why-is-it-bad-practice-to-have-a-viewcontroller-dismiss-itself indexpath comparison         if selectIndexPath . contains (indexPath) {             cell. isSelect...
張貼留言
閱讀完整內容

android java 小數點的坑

如果temp  = 12.5                         val newTemp = "%.1f".format(Tempvalue) 原本的寫法是這樣 在法語區 將newTemp.toFloat() 後會掛，因為法語地區的小數點是 , 逗號 所以沒法轉成 12.5  會變成 12,5 後來的解法 將拿到的數字硬轉成 12.5  其他就不管了 val newTemp = "%.1f" . format ( Locale . US , Tempvalue)
張貼留言
閱讀完整內容

collection view part 5 swift

load plist data https://www.cnblogs.com/gongyuhonglou/p/6029340.html https://blog.csdn.net/sophieDJF/article/details/88247388 https://stackoverflow.com/questions/24045570/how-do-i-get-a-plist-as-a-dictionary-in-swift https://stackoverflow.com/questions/40436895/how-to-read-plist-without-using-nsdictionary-in-swift get specifig key in dictionary https://stackoverflow.com/questions/24640990/how-do-i-get-the-key-at-a-specific-index-from-a-dictionary-in-swift get specifig key with index https://stackoverflow.com/questions/31775724/swift-dictionary-access-via-index get collectionview selection https://stackoverflow.com/questions/21639394/how-to-select-item-in-collectionview-programmatically add button in uinavigationbar https://www.hackingwithswift.com/example-code/uikit/how-to-add-a-bar-button-to-a-navigation-bar child viewcontroller pass data to parent viewcontroller https://stackoverflow.com/questions/39285588/how-to-pass-data-from-child-to-parent-view-controller-in-sw...
張貼留言
閱讀完整內容