HTML DOM (document对象)

0.096字数 127阅读 89

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>