JavaScript_下_Dom

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huyande123/article/details/78565339

Dom对象

Dom对象：Document Object Model 文档对象模型。js是用来操作html的。
一个文档必须被加载到浏览器中，会按照HTML的层级结构转换成一个“家谱树”称为dom树。HTML文档里的所以的标签，属性，文本都会转换成dom树上的节点。

• Element ：是Html标签转换成的节点
• Attribute ：标签的属性转换成的节点，它不是Element的子节点，是依附在Element节点上的。
• Text ：文本转换成的节点

操作HTML标签

1、获取标签

1. document.getElementById(id值)； 获取一个Element对象;
2. document.getElementsByName(name值);获取一批Element对象；
3. document.getElementsByTagName(标签名称);获取一批Element对象；
4. document.getElementsByClassName(class名称);获取一批Element对象；

2、操作标签

1. 创建标签：创建出来的标签，不在dom树里，所以不会显示到页面上。

   document.createElement("标签");
   

2. 插入标签

   子标签对象.innerHTML="内容";//给子标签体添加内容
   父标签对象.document.appendChild(子标签对象");
   

3. 删除标签

   标签对象.remove();
   

4. 操作标签体（开始标签与结束标签的内容）

   1. 先找到标签对象
   2. 获取标签体

   3. 操作标签体（覆盖式的操作）

      获取标签体对象：标签对象.innerHTML
      设置标签体：标签对象.innerHTML=“....”
      
      设置文本：标签对象.innerText=“....”
      

操作属性

1. 获取属性
   
   1. var 属性值=element.属性名
   2. var 属性值=element.getAttribute(“属性名”);
2. 设置属性
   
   1. element.属性名=“…”
   2. element.setAttribute(“属性名”,”新值”);
3. 删除属性
   
   1. element.removeAttribute(“属性名”);

js的九个内置对象（引用数据类型）

• Js Array
• JS Boolean
• JS Date
• JS Math
• JS Number
• Js String
• JS RegExp
• JS Functions
• Js Events