HTML DOM (document对象)
程序员文章站
2022-07-04 20:05:30
...
HTML DOM 可通过 JavaScript 进行访问。
Document 对象可以对 HTML 页面中的所有元素进行访问。
document对象属性
| 属性 | 描述 |
|---|---|
| head | 提供对 <head> 元素的直接访问。document.head
|
| body | 提供对 <body> 元素的直接访问。document.body
|
| cookie | 设置或返回与当前文档有关的所有 cookie。document.cookie
|
| domain | 返回当前文档的域名。document.domain
|
| lastModified | 返回文档被最后修改的日期和时间。document.lastModified
|
| referrer | 返回载入当前文档的文档的 URL。document.referrer
|
| title | 返回当前文档的标题。document.title
|
| URL | 返回当前文档的 URL。document.URL
|
document对象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。如[object HTMLDivElement]
|
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。如[object HTMLCollection]
|
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。如[object HTMLCollection]
|
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值（应是对元素节点的操作）。 |
| setAttribute() | 把指定属性设置或修改为指定的值（应是对元素节点的操作）。 |
| setAttributeNode() | 把指定属性设置或修改为指定的值（应是对元素节点的操作）。 |
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="myDiv">
<ul id="myUl">
<li class="classLi">张三</li>
<li class="classLi">李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
</div>
<li id="li" style="font-size: 20px">陈大</li>
</body>
<html>
方法详解
-
getElementById()
<script>
var tagNames=document.getElementById("myDiv");
console.log("通过指定id获得:"+myDiv);
</script>
通过指定id获得：[object HTMLDivElement]
-
getElementsByClassName()
是一个元素的节点
<script>
var classLis=document.getElementsByClassName("classLi");
console.log("通过指定类名获得:"+classLis);
</script>
通过指定类名获得:[object HTMLCollection]
是一组元素的节点列表
-
getElementsByClassName()
<script>
var targets=document.getElementsByTagName("li");
console.log("通过指定标签名称:"+targets);
</script>
通过指定标签获得:[object HTMLCollection]
是一组元素的节点列表
-
appendChild()
<script>
var li=document.getElementById("li")
var myUl=document.getElementById("myUl");
myUl.appendChild(li);
</script>
-
removeChild()
<script>
var myUl=document.getElementById("myUl");
var firstLi= document.getElementsByClassName("classLi")[0];
myUl.removeChild(firstLi);
</script>
-
replaceChild()
<script>
var myUl=document.getElementById("myUl");
var li=document.getElementById("li");
var firstLi= document.getElementsByClassName("classLi")[0];
myUl.replaceChild(li,firstLi);//第一个参数是新节点，第二个是旧节点
</script>
-
insertBefore()
<script>
var myUl=document.getElementById("myUl");
var li=document.getElementById("li");
var secondLi= document.getElementsByClassName("classLi")[1];
myUl.insertBefore(li,secondLi);//第一个参数是新节点，第二个是旧节点
</script>
-
createAttribute()
<script>
var firstLi= document.getElementsByClassName("classLi")[0];
var secondLi= document.getElementsByClassName("classLi")[1];
var attr=document.createAttribute("style");
attr.value="color:red";
//setAttributeNode（） 和setAttribute（）区别
firstLi.setAttributeNode(attr);
secondLi.setAttribute("style","color:blue");
</script>
-
createElement()
<script>
var newElement= document.createElement("div");//创建一个div
var body=document.body;
body.appendChild(newElement);
newElement.setAttribute("style","width: 80px;height: 80px;background-color: red");//设置style属性使div宽80px,高80px,背景颜色红色
</script>
-
createTextNode()
<script>
var newElement= document.createElement("div");//创建一个div
var body=document.body;
body.appendChild(newElement);
newElement.setAttribute("style","width: 80px;height: 80px;background-color: red");//设置style属性使div宽80px,高80px,背景颜色红色
var text=document.createTextNode("我爱你");
newElement.appendChild(text);
</script>
-
getAttribute()
<script>
var li= document.getElementById('li');
var attr=li.getAttribute("style");
console.log("结果是："+attr)
</script>
结果是：font-size: 20px
-
setAttribute()
<script>
var firstLi= document.getElementsByClassName("classLi")[0];
firstLi.setAttribute("style","color:green");
</script>
-
setAttributeNode()
<script>
var firstLi= document.getElementsByClassName("classLi")[0];
var attr=document.createAttribute("style");
attr.value="color:green";
firstLi.setAttributeNode(attr);
</script>
转载于:https://www.jianshu.com/p/718d14507acb
下一篇： HTML 样式