JavaScript中document对象的常⽤⽅法
document对象的概念
浏览器对外提供的⽀持js的⽤来操作HTML⽂档的⼀个对象，此对象封存的HTML⽂档的所有信息。
js获取子元素
1、使⽤document获取HTML元素对象
  直接获取⽅式：
    通过id： ElementById("id值")
    通过name属性值：ElementsByName("name值")
    通过标签名：ElementsByTagName("属性名")
    通过class属性值：ElementsByClassName("class值")
  间接获取⽅式：
  ⽗⼦关系：获取⽗级元素对象
        　var ElementById("id值");
      　获取所有的⼦元素对象数组
        　var childs=showdiv.childNodes;
  ⼦⽗关系：获取⼦元素对象
        v ar ElementById("id值");
      获取⽗级元素对象
        var div=inp.parentNode;
  兄弟关系：var ElementById("id的值");
      　var preEle= inp.previousSibling;//弟获取兄
      　var Sibling;//兄获取弟
2、js操作HTML元素属性
  获取元素对象
  操作元素属性
  获取：
    元素对象名.属性名//返回当前属性的属性值。----固有
    元素对象名.getAttribute("属性名");//返回⾃定义属性的值-----⾃定义
  修改
    元素对象名.属性名=属性值
    元素对象名.setAttribute("属性名","属性值");//修改⾃定义属性的值----⾃定义
  注意：
    尽量的不要去修改元素的id值和name属性值。
    使⽤⾃定义⽅式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的⽤户数据。
3、操作元素内容：
  获取元素对象
    获取
      元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签
      元素对象名.innerText//返回当前元素对象的⽂本内容，不包括HTML标签
    修改
      元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析      元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
      元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通⽂本显⽰。
4、js操作元素样式：
  获取元素对象
    通过style属性
      元素对象名.style.样式名="样式值"//添加或者修改
      元素对象名.style.样式名=""//删除样式
  注意:
    以上操作，操作的是HTML的style属性声明中的样式。⽽不是其他css代码域中的样式。
  通过className
    元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式(通过修改class的值，来调⽤先写好的css样式)
    元素对象名.className=""//删除类样式。
5、js操作HTML⽂档结构:
    1）增加节点
    第⼀种⽅式：使⽤innerHTML
    div.innerHTML=div.innerHTML+"内容"//增加节点
  1）删除节点
    div.innerHTML=""//删除所有⼦节点
    ⽗节点.removeChild(⼦节点对象)//删除指定的⼦节点。
  2）增加节点
    获取元素对象var ateElement("标签名");
    元素对象名.appendChild(obj);
  2）删除节点
    ⽗节点.removeChild(⼦节点对象)//删除指定的⼦节点。
6、js操作form:
  获取form表单对象
    使⽤id:var ElementById("id值");
    使⽤name属性:var frm=document.name值;
  获取form下的所有表单元素对象集合：fm.elements
  form表单的常⽤⽅法
    表单对象.submit();//提交表单数据。
  form的属性操作：
    表单对象名.action="新的值"//动态的改变数据的提交路径
    表单对象名.method="新的值"//动态的改变提交⽅式
  js表单元素的通⽤属性
    只读模式:
      readonly="readonly"//不可以更改，但是数据可以提交
    关闭模式：
      disabled="disabled"//不可以进⾏任何的操作，数据不会提交。  js操作多选框、单选框
    被选中状态下在js中checked属性值为true，未选中状态为false;
  js操作下拉框：
    被选择的option对象在js中selected属性值为true，未选中为false

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。