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.οnclick=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>

 

 

    

转载于:https://www.cnblogs.com/yuyuanwen/p/10981619.html