标签：10 对象 标签 元素 JS 获取 document 属性

js中用来操作HTML文档的对象，通过操作document对象可以对正在运行的代码进行修改。

 

---

一、获取HTML标签对象

直接获取：

　　1、通过id获取：window（可省）.document.getElementById("标签的id值");

　　2、通过name获取：document.getElementsByName("标签的name值");

　　3、通过标签名获取：document.getElementsByTagName("标签名")；

　　4、通过class获取：document.getElementsByClassName("标签的class值")

间接获取：

　　1、父获子：通过父标签对象获取子标签：父标签对象.childNodes;

　　2、子获父：通过子标签对象获取父标签：子标签对象.parentNode;

　　3、弟获兄：通过标签对象获取最近的上方标签：弟标签对象.previousSibling;

　　4、兄获弟：通过标签对象获取最近的下方标签：兄标签对象.nextSibling;

---

二、操作标签属性

属性分为两种：固有属性和自定义属性，自定义属性只能通过set\getAttribute方法操作。

获取：

　　1、元素对象.属性名

　　2、元素对象.getAttribute("属性名")

　　通过getAttribute方式获取的value值为初始值，不能获取到动态的值。

修改：

　　1、元素对象.属性名 = 值；

　　2、元素对象.setAttribute("属性名"，"值")

---

三、操作标签内容

操作双标签中的内容。

获取：

//获取当前对象的所有内容，包括html标签
元素对象.innerHTML；
//获取单曲对象的文本内容，不包括html标签
元素对象.innerText;

修改：

//覆盖原内容，会解析html标签
元素对象.innerHTML="值";
//覆盖原内容，不会解析html标签
元素对象.innerText="值";

---

四、操作标签样式

1、通过style属性操作：

//添加或者修改样式，值为空则为删除此样式
元素对象.style.样式名="值";

2、通过className修改样式：

//修改元素的所属类，会在css样式中寻找对应的类进行样式更新
元素对象.className="值"；

 

标签：10,对象,标签,元素,JS,获取,document,属性
From： https://www.cnblogs.com/lurenjia-bky/p/17060356.html