javascript_操作dom_原生
Posted mexding
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript_操作dom_原生相关的知识,希望对你有一定的参考价值。
//javascript_操作dom_原生 //--------------------------------------代码1: // 返回ID为‘test‘的节点: var test = document.getElementById(‘test‘); // 先定位ID为‘test-table‘的节点,再返回其内部所有tr节点: var trs = document.getElementById(‘test-table‘).getElementsByTagName(‘tr‘); // 先定位ID为‘test-div‘的节点,再返回其内部所有class包含red的节点: var reds = document.getElementById(‘test-div‘).getElementsByClassName(‘red‘); // 获取节点test下的所有直属子节点: var cs = test.children; // 获取节点test下第一个、最后一个子节点: var first = test.firstElementChild; var last = test.lastElementChild; //--------------------------------------代码1解说: //1.查1 //--------------------------------------代码2: // 通过querySelector获取ID为q1的节点: var q1 = document.querySelector(‘#q1‘); // 通过querySelectorAll获取q1节点内的符合条件的所有节点: var ps = q1.querySelectorAll(‘div.highlighted > p‘); //--------------------------------------代码2解说: //1.查2 //--------------------------------------代码3: // 获取<p id="p-id">...</p> var p = document.getElementById(‘p-id‘); // 设置文本为abc: p.innerhtml = ‘ABC‘; // <p id="p-id">ABC</p> // 设置HTML: p.innerHTML = ‘ABC <span style="color:red">RED</span> XYZ‘; // <p>...</p>的内部结构已修改 //--------------------------------------代码3解说: //1.改1 //--------------------------------------代码4: // 获取<p id="p-id">...</p> var p = document.getElementById(‘p-id‘); // 设置文本: p.innerText = ‘<script>alert("Hi")</script>‘; // HTML被自动编码,无法设置一个<script>节点: // <p id="p-id"><script>alert("Hi")</script></p> //--------------------------------------代码4解说: //1.改2 //--------------------------------------代码5: // 获取<p id="p-id">...</p> var p = document.getElementById(‘p-id‘); // 设置CSS: p.style.color = ‘#ff0000‘; p.style.fontSize = ‘20px‘; p.style.paddingTop = ‘2em‘; //--------------------------------------代码5解说: //1.改3: css属性名改为驼峰式命名 //--------------------------------------代码6: // <!-- HTML结构 --> <p id="js">JavaScript</p> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div> var js = document.getElementById(‘js‘), list = document.getElementById(‘list‘); list.appendChild(js); //--------------------------------------代码6解说: //1.插1:插入dom树已有节点,删除原来的 //--------------------------------------代码7: var list = document.getElementById(‘list‘), haskell = document.createElement(‘p‘); haskell.id = ‘haskell‘; haskell.innerText = ‘Haskell‘; list.appendChild(haskell); //--------------------------------------代码7解说: //1.插2:新建1个节点,插入dom树 //--------------------------------------代码7: var d = document.createElement(‘style‘); d.setAttribute(‘type‘, ‘text/css‘); d.innerHTML = ‘p { color: red }‘; document.getElementsByTagName(‘head‘)[0].appendChild(d); //--------------------------------------代码7解说: //1.插3:动态创建了一个<style>节点,然后把它添加到<head>节点的末尾 //--------------------------------------代码8: // <!-- HTML结构 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div> var list = document.getElementById(‘list‘), ref = document.getElementById(‘python‘), haskell = document.createElement(‘p‘); haskell.id = ‘haskell‘; haskell.innerText = ‘Haskell‘; list.insertBefore(haskell, ref); //--------------------------------------代码8解说: //1.插4:在节点前面插入 //--------------------------------------代码9: // 拿到待删除节点: var self = document.getElementById(‘to-be-removed‘); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.removeChild(self); removed === self; // true //--------------------------------------代码9解说: //1.删1 //--------------------------------------代码10: // <!-- HTML结构 --> <div id="parent"> <p>First</p> <p>Second</p> </div> var parent = document.getElementById(‘parent‘); parent.removeChild(parent.children[0]); parent.removeChild(parent.children[1]); // <-- 浏览器报错 //--------------------------------------代码10解说: //1.删2:会报错,因为children属性在变化
以上是关于javascript_操作dom_原生的主要内容,如果未能解决你的问题,请参考以下文章
(89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点