前端基础知识--Document的常用属性和常用函数

概述

• 每个载入到浏览器中的HTML文档都会生成一个对应的Document对象，通过操作该Document对象，可以达到操作该HTML文档的目的；
• Document对象是DOM的核心对象(基础对象);

常用属性

• body

  • 提供body标签元素的访问（获取body标签对应的Element对象）。

    document.body;
    

• title

  • 提供title标签元素的访问（获取title标签对应的Element对象）。

    document.title='新标题';
    

• URL

  • 获取当前页面的URL。

    document.URL
    

• images

  • 获取当前页面所有图片的访问。(获取所有img标签对应的Element对象数组

    var imgElementArray=document.images;
    for(var imgEle of imgElementArray)
        {
            console.log(imgEle);
        }

• forms

  • 获取当前页面所有表单的访问。(获取所有form标签对应的Element对象数组)

var formElementArray=document.forms;
for(var formEle of formElementArray){
console.log(formEle);
}

常用函数

• getElementById()

  • 获取当前页面指定id属性值的第一个元素对象。

  • 参数

    • 目标id属性值。

  • 返回值

    • 查找到的Element元素对象。如果不存在指定元素，则返回null；

    var myDiv1Element=document.getElementById('myDiv');

• getElementsByTagName()

  • 获取当前页面指定标签名称的所有元素对象(元素集合)。

  • 参数

    • 目标标签名称。

  • 返回值

    • 查找到的Element元素对象集合。如果不存在指定元素，则返回空集合(长度为0)。

var divElementArray=document.getElementsByTagName('div');
for(var divEle of divElementArray){
console.log(divEle);
}

• getElementsByClassName()

  • 获取当前页面指定class属性值的所有元素对象(元素集合)。

  • 参数

    • 目标class属性值。

  • 返回值

    • 查找到的Element元素对象集合。如果不存在指定元素，则返回空集合(长度为0)。

var demoClassElementArray=document.getElementsByClassName('demo');
for(var clEle of demoClassElementArray){
console.log(clEle);
}

• getElementsByName()

  • 获取当前页面指定name属性值的所有元素对象(元素集合)。

  • 参数

    • 目标name属性值。

  • 返回值

    • 查找到的Element元素对象集合。如果不存在指定元素，则返回空集合(长度为0)。

var testNameElementArray=document.getElementsByName('test');
for(var nameEle of testNameElementArray){
console.log(nameEle);
}

• querySelector()

  • 获取指定CSS选择器选择结果中的第一个元素。

  • 参数

    • 目标CSS选择器语法。

  • 返回值

    • 选择结果中第一个Element元素对象。

var inputElement=document.querySelector('input[name="test"]');

• querySelectorAll()

  • 获取指定CSS选择器选择结果中的所有元素。

  • 参数

    • 目标CSS选择器语法。

  • 返回值

    • 存储了选择结果中所有Element元素对象的集合。

var divElementArray=document.querySelectorAll('div');

• createElement()

  • 创建指定名称的元素节点，并将创建的元素节点作为返回值返回。

  • 参数

    • 目标标签名称。

  • 返回值

    • 创建的新元素对象。

var aElement=document.createElement('a');

• write()

  • 向当前HTML文档写出HTML内容。

  • 参数

    • 要写出的HTML内容(字符串)。

  • 返回值

    • 无。

document.write(`<img src='图片路径'/>`);

• writeln()

  • 向当前HTML文档写出HTML内容后添加换行符(\n)。

  • 参数

    • 要写出的HTML内容(字符串)。

  • 返回值

    • 无。

document.writeln(`<img src='图片路径'/>`);