Document

HTMLDocument继承自Document。 在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性,因此可以直接调用

1.属性

documentElement  指向HTML页面中的<html>元素。

title  获取文档的标题

URL 获取URL

domain  取得域名,并且可以进行设置,在跨域访问中经常会用到。

referrer 取得链接到当前页面的那个页面的URL,即来源页面的URL。

links 获取文档中所有带href属性的a元素

body 指向body元素

images  获取所有img对象,返回HTMLCollection类数组对象

forms  获取所有form对象,返回HTMLCollection类数组对象

2.查找元素的方法

getElementById()   返回指定 id 的一个元素。

getElementsByTagName()   返回一个HTMLCollection(伪数组),包含指定标签名的所有元素。

getElementsByClassName()  返回一个HTML集合HTMLCollection(伪数组),包含指定类名的所有元素。

<div id="div1">我是div1</div>
    <div class="div2">啊啊</div>
    <div class="div2">我是div2</div>
    <script>
        //查询id为div1的元素
        var div = document.getElementById('div1');
            console.log(div); //<div id="div1">我是div1</div>

        //返回所有包含div标签的元素
        var div1 = document.getElementsByTagName('div');
        console.log(div1); // HTMLCollection(3) [div#div1,div.div2,div.div2,div1:div#div1]

        //返回所有包含匹配div2的所有元素。
        var div2 = document.getElementsByClassName('div2')
        console.log(div2);//HTMLCollection(2) [div.div2,div.div2]
    </script>

document.querySelector() 返回文档中指定的CSS选择器的第一个元素

<div id="div1">div1</div>
<div id="div1">div1</div>
<script>
//将第一个 div 里的内容替换为helloworld
document.querySelector("#div1").innerHTML = "HelloWorld!";
</script>

3.添加元素的方法

document.createElement(element)

创建一个新的HTML元素,一般需要与appendChild() 或 insertBefore()方法联合使用。

<div id="div1">div1</div>
    <script>
        var d1 = document.getElementById('div1')
      var p1 = document.createElement('p')
      p1.innerHTML = '哈哈哈'
        // 向div1中插入p1
      d1.appendChild(p1);
</script>

4.写入

document.write() 向文档写如文本或 HTML 表达式 或 JavaScript 代码。

<script>
        document.write("<p>Helloworld!</p>");
        document.write("<a>helloworld</a>");
      </script>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐