DOM
1.认识DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
2.DOM树
3.节点关系
- nodeName:元素标签名,还有个类似的tagName
- className:类名
- children:子元素列表(HTMLCollection)
- childNodes:子元素列表(NodeList)
- firstChild:第一个子元素
- lastChild:最后一个子元素
- nextSibling:下一个兄弟元素
- previousSibling:上一个兄弟元素
- parentNode、parentElement:父元素
4.HTML查找
getElementById() 方法返回带有指定 ID 的元素
var elem = document.getElementById("test");
getElementsByTagName()方法返回所有指定标签的元素(搜索范围包括本身)
var paras = document.getElementsByTagName("p");
getElementsByClassName()按name属性查找
var element=document.getElementsByClassName("intro");
querySelectorAll方法的参数,可以是逗号分隔的多个CSS选择器
querySelector方法返回匹配指定的CSS选择器的元素节点
5.创建新的 HTML 元素
1 <div class="d1"> 2 3 </div> 4 <script> 5 var para=document.createElement("p"); 6 para.innerHtml="我是新添加的段落"; 7 var element=document.getElementById("d1"); 8 element.appendChild(para); 9 </script>
添加元素
appendChild
1 <div id="content"></div> 2 <button id="btn">添加图片</button> 3 <script> 4 var btn = document.getElementById("btn"); 5 btn.onclick=function(){ 6 var img = document.createElement("img"); 7 img.src = "http://www.baidu.com/img/baidu_sylogo1.gif"; 8 btn.appendChild(img); 9 } 10 <script>