Node operation:
- View object property values obj.getAttribute ()
Such as:
// get image var imgs = document.getElementsByTagName ( "IMG" ); // See src attribute value obj.getAttribute () Alert (imgs [0] .getAttribute ( "src"));
- Modify the value of object properties obj.setAttribute (attribute, attribute value)
Such as:
// get image var imgs = document.getElementsByTagName ( "IMG" ); // modify the src attribute value obj.setAttribute (attribute, attribute value) imgs [0] .setAttribute ( "src", "../ IMG / img02 .jpg ");
- Create a node document.createElement ();
Such as:
// Create a node var newImg = document.createElement ( "IMG" );
// set the path of the pictures Picture 3 newimg.setAttribute("src","../img/img03.jpg");
- Set properties for the newly created node
Such as:
// newimg.setAttribute ( "width", "300px by"); // or the following methods newimg.style.width = "300px by" ; newimg.style.marginRight = "10px";
- Insert a picture in the specified node
// 1, inserted in front of the object images acquired images (new, specified location) // objdiv.insertBefore (newImg, imgs [0]); // 2, prior to the insertion node in the specified node // the appendChild () append a child node a node // objdiv.appendChild (newImg); // 3, clone node the cloneNode (T | F) // If is true: Cloning and all their sub-elements // when false: not clones element var ObjC = objdiv.cloneNode ( to true ); objc.style.float = "left"; objdiv.appendChild(objc);
- Delete Node
// Removes the child node removeChild (); first access to the parent node and then delete // imgs [0] .parentNode.removeChild (imgs [0]); // delete your imgs [0 ] .remove (); // replace node replaceChild (new, old);
- Attribute node
// nextElementSibling get the next sibling node // previousElementSibling get on a sibling node // parentNode get the parent node // childNodes get all the child nodes, can be accessed through the array // get the first child node firstChild // Last acquired last a child node
Operating table:
// Get the object table var Table = document.getElementById ( "MyTable" ); //获取tr var trs = document.getElementsByTagName("tr"); // get all the rows in a table var Row = table.rows;
- The method of operation of adding a line
// (Method a) inserting rows insetRow (index), without prior acquisition td, td be added directly into a content into // var table.insertRow ROW1 = (. 1) .innerHTML = '<td> Dream of the Red </ td > <td> 30 </ td > '; // (Method B) to obtain td, td give assignment var ROW1 table.insertRow = (. 1 ); // get a first row var the td1 = row1.insertCell (0); // get the first td var TD2 = row1.insertCell (. 1 ); // information acquired from the input box to assign td td1.innerHTML = shu; td2.innerHTML = danjia; // Method three, insert the cloned data // first row 4 clones need to increase as data / * var rowc = trs[3].cloneNode(true); table.appendChild (rowc); // clone additional data table obtained after the child */
-
Delete Row
// delete the row deleteRow (index) table.deleteRow (1);
Achieve image carousel effect:
- Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/图片轮播.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * { padding: 0px; margin: 0px; } #con { width: 400px; margin: auto; margin-top: 10%; position: relative; } #img { width: 400px; height: 300px; } li { list-style: none; width: 78px; height: 60px; background: rgba(0, 0, 0, 0.4); float: left; text-align: center; line-height: 60px; color: white; font-size: 20px; border: 1px gainsboro solid; cursor: pointer; } li:nth-child { background-color: rgba(0,0,0,0.4); } ul { position: absolute; bottom: 4px; } </style> </head> <body> <div id="con"> <div id="pics"> <img id="img" src="../img/img01.jpg" alt="图片路径错误"> </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
- JavaScript code
var imgs = ["img00.jpg", "img01.jpg", "img02.jpg", "img03.jpg", "img04.jpg"]; var texts = ["一", "二", "三", "四", "五"]; was index = 0 ; was lx; window.onload = test01; function test01() { lx = setInterval("changeImg()", 2000); //获取li var lis = document.getElementsByTagName("li"); // cycle is to click event for ( var I = 0; I <lis.length; I ++ ) { bind(i); } } function bind(i) { //index--; var lis = document.getElementsByTagName("li"); lis[i].onclick = function() { index = I -. 1 ; // Clear timer clearInterval (lx); changeImg(); lx = setInterval("changeImg()", 2000); } } function changeImg() { index++; if (index > imgs.length - 1) { index = 0; } // get image var IMG = document.getElementById ( "IMG" ); // modify image properties var imgsrc = "../img/" + imgs [index]; img.setAttribute("src", imgsrc); list(); } function List () { // Get Li var LIS = document.getElementsByTagName ( "Li" ); // cycle Li for ( var I = 0; I <lis.length; I ++ ) { IF (I == index) { / / change the background color LIS [index] = .style.backgroundColor "RGBA (60,172,200,0.4)" ; // change background text LIS [index] = .innerText Texts [index]; } else { lis[i].style.backgroundColor = "rgba(0,0,0,0.4)"; lis [in] .innerText = i + 1 ; } } }