js基础
——————————————————创建节点的四种方法
创建元素节点：document.createElement()
创建文本节点：document.createTextNode()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="myList">
</ul>
<script type="text/javascript">
var ul = document.getElementById("myList");
var li = document.createElement("li"); // 创建元素
var txt = document.createTextNode("item"); // 创建文本节点
li.appendChild(txt);
ul.appendChild(li);
</script>
</body>
</html>
创建代码片段节点：document.createElementFragment()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="myList">
</ul>
<script type="text/javascript">
var fragment = document.createDocumentFragment(); // 声明文档片段
var ul = document.getElementById("myList");
var li = null
for (var i = 0; i < 3; i++) {
li = document.createElement("li");
li.appendChild(document.createTextNode("item" + (i + 1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);
</script>
</body>
</html>
创建注释节点：document.createComment()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="myList">
</ul>
<script type="text/javascript">
var comment = document.createComment("A comment"); // 创建注释节点
document.body.insertBefore(comment, document.body.firstChild);
</script>
</body>
</html>
——————————————————高效创建节点的方法
innerHtml：用来设置或获取当前标签的起始和结束标签里面的内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"> </div> <script type="text/javascript"> var content = document.getElementById("content"); var str = "<p>Harold</p>" + "<ul>" + "<li>item1</li>" + "<li>item2</li>" + "</ul>"; content.innerHTML = str; </script> </body> </html>
outerHtml：返回调用它的元素及所有子节点的HTML标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"> <p>Harold</p> </div> <script type="text/javascript"> var content = document.getElementById("content"); console.log(content.outerHTML); content.outerHTML = "<p>LGSP</p>"; </script> </body> </html>
innerText：设置或获取位于对象起始和结束标签内的文本（火狐使用的是textContent）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"> </div> <script type="text/javascript"> var content = document.getElementById("content"); // 兼容所有浏览器的innerText读取的方法 function getInnerText (element) { return (typeof element.textContent == "string") ? element.textContent : element.innerText; } console.log(getInnerText); // 兼容所有浏览器的innerText的设置方法 function setInnerText (element, text) { if (typeof element.textContent == "string") { element.textContent = text; } else { element.innerText = text; } } setInnerText(content, "Harold") </script> </body> </html>
outerText：不建议使用
——————————————————遍历节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="paragraph">Harold</p> <script type="text/javascript"> // 返回一个文档的文档元素documentElement var oHtml = document.documentElement; console.log(oHtml.tagName); // 获取子节点firstChild、childNodes[0]、childNodes.item(0) var oHead1 = oHtml.firstChild; var oHead2 = oHtml.childNodes[0]; var oHead3 = oHtml.childNodes.item(0); console.log(oHead1); console.log(oHead2); console.log(oHead3); // 获取父节点parentNode console.log(oHead1.parentNode == oHtml); var oBody1 = oHtml.childNodes.item(1); var oBody2 = oHtml.childNodes[1]; console.log(oBody1); console.log(oBody2); console.log(oBody1.parentNode == oHtml); // 返回元素之后紧跟的节点nextSibling console.log(oHead1.nextSibling); var oTitle = oHead1.childNodes.item(1); console.log(oTitle); // 获取根节点ownerDocument console.log(oTitle.ownerDocument); console.log(oTitle.ownerDocument == document); var p = document.getElementById("paragraph"); // 判断是否存在子节点hasChildNodes console.log(p.hasChildNodes()); var txt = p.childNodes[0]; console.log(txt.hasChildNodes()); </script> </body> </html>
1、遍历所有节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <body> <form action="" method="post"> <input type="submit" value="click"/> </form> <script type="text/javascript"> var s = ""; function travel (space, node) { if (node.tagName) { // 如果当前节点是标签，不是空的，就拼接字符串 s += space + node.tagName + "<br />"; } var len = node.childNodes.length; // 保存当前节点的子节点个数 for (var i = 0; i < len; i++) { travel(space + "|——", node.childNodes[i]); } } travel("", document); document.write(s); </script> </body> </html>
2、解决空白节点
方法一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> var box = document.getElementById("box"); for(var i = 0, len = box.childNodes.length; i < len; i++) { // console.log(box.childNodes[i]); if (box.childNodes[i].nodeType == 1) { console.log(box.childNodes[i]); } } </script> </body> </html>
方法二：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> var box = document.getElementById("box"); // 方法二，IE8以下不支持 for(var i = 0, len = box.childElementCount; i < len; i++) { console.log(box.children[i]); } </script> </body> </html>
3、NodeList
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> var box = document.getElementById("box"); var nodes = box.childNodes; console.log(nodes); console.log(nodes[1]); console.log(nodes.item(1)); function makeArray1(nodeList) { var arr = new Array(); for(var i = 0, len = nodeList.length; i < len; i++) { arr.push(nodeList[i]); } return arr // 下行代码不支持IE8及以下版本浏览器,执行效果同上5行代码 // return Array.prototype.slice.call(nodeList); } var newNodeList1 = makeArray1(nodes); newNodeList1.push("<li>4</li>") console.log(newNodeList1) // 浏览器兼容写法 function makeArray2(nodeList) { var arr = null; try { return Array.prototype.slice.call(nodeList); } catch(e) { arr = new Array() for(var i = 0, len = nodeList.length; i < len; i++) { arr.push(nodeList[i]); } } return arr; } var newNodeList2 = makeArray1(nodes); newNodeList2.push("<li>4</li>") console.log(newNodeList2) </script> </body> </html>
5、HTMLCollection
——5.1、Ele.getElementsByTagName()
——5.2、document.scripts
——5.3、document.links
——5.4、document.images
——5.5、document.forms
——5.6、tr.cells
——5.7、select.options
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="box"> <li>1</li> <li>2</li> <li>3</li> </ul> <table border="1" cellspacing="" cellpadding=""> <tr id="tr"> <td id="td">1</td> <td name="td">2</td> <td name="td">3</td> </tr> </table> <img src="" alt="" /><img src="" alt="" /> <form action="" method="post"> <input type="text" value="name" /> </form> <form action="" method="post"> <input type="password" value="password" /> </form> <a href="#">注册</a> <a href="#">忘记密码</a> <select id="select"> <option value="0">0</option> <option value="1">1</option> </select> <p>1</p> <p>2</p> <script type="text/javascript"> var scripts = document.scripts; var links = document.links; var cells = document.getElementById("tr").cells; var imgs = document.images; var forms = document.forms; var options = document.getElementById("select").options; var ps = document.getElementsByTagName("p"); console.log(scripts); console.log(links); console.log(cells); console.log(imgs); console.log(forms); console.log(options); console.log(ps); console.log(cells.namedItem("td")); </script> </body> </html>
6、NamedNodeMap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>类数组对象NamedNodeMap</title> </head> <body> <ul id="box" data-url="index.html" node-action="submit"> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> var box = document.getElementById("box"); var attrs = box.attributes; console.log(attrs); console.log(attrs.length); console.log(attrs[0]); console.log(attrs.item(1)); </script> </body> </html>
——————————————————查找节点
1、getElementById()
2、getElementsByName()
3、getElementsByTagName()
4、getElementsByClassName()
5、querySelector()
6、querySelectorAll()
、
、
1
略懂，略懂....
