跳到主要內容

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...
張貼留言
閱讀完整內容

collection view part3 swift

make random color for test, i put in cell background color watch diff https://stackoverflow.com/questions/29779128/how-to-make-a-random-color-with-swift because use CYlayer, i have to remove layer https://stackoverflow.com/questions/10789766/remove-all-sublayers-from-a-view https://stackoverflow.com/questions/37581951/ios-how-to-remove-previously-added-sublayers-of-a-uiview/37581988 alpha gradint with imageview https://stackoverflow.com/questions/11807876/transparent-alpha-gradient-with-core-graphic-iphone swift map and flatmap http://swiftcafe.io/2016/03/28/about-map/ get local date and time https://stackoverflow.com/questions/28404154/swift-get-local-date-and-time swift dictionary basic https://stackoverflow.com/questions/27313242/how-to-append-elements-into-dictionary-in-swift add 1 day to NSDate https://stackoverflow.com/questions/5067785/how-do-i-add-1-day-to-an-nsdate get keys from dictionay https://stackoverflow.com/questions/26386093/array-from-dictionary...
張貼留言
閱讀完整內容

js30 d27 drag跑馬燈

https://github.com/richardhsieh18/js30/tree/master/course27 CSS transform: scale(0.98);  =>  transform: scale(1); js     isDown = true;     slider.classList.add('active');     startX = e.pageX - slider.offsetLeft;     scrollLeft = slider.scrollLeft;   });     if(!isDown) return; //stop the function from running     e.preventDefault();     const x = e.pageX - slider.offsetLeft;     const walk = (x - startX) * 3;     slider.scrollLeft = scrollLeft - walk;   });
張貼留言
閱讀完整內容