操作HTML页面元素-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HELLO</title>
</head>
<body>
  <div>
    <h3 id="title" class="tit">hello document</h3>
  </div>
  <script>
    // DOM 文档对象模型 为我们提供了操作html页面元素的方法

    // 在整个html文档（Document） 中浏览器提供了一个document（文档对象）供我们来使用

    // 获取页面元素方法
    // id名
    // document.getElementById(id)
    // class [li, li][1]
    // document.getElementsByClassName(class)
    // tagName
    // document.getElementsByTagName(tagName)

    // 元素内容
    var title = document.getElementById('title')
    title.innerHTML = 'hello 2019 2019'
    title.className = 'nihao'


    // 整个html页面 称为document文档（html文档）
    // 文档里包含 整个html元素

    // html标签 称为根元素（root element）

    // 获取html元素（页面中 html标签）
    document.documentElement

    // 获取head元素（页面中head标签）
    document.head

    // 获取body元素（页面中body标签）
    document.body
    
    // 获取title元素（页面中title标签）
    document.title
    document.title = 'hello world'


  </script>
</body>
</html>
复制代码