阅读 924

JavaScript的document对象

JavaScript的document对象

一、document对象的概念

浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。

Document节点：DOM全称为Document Object Model，即文档对象模型，是一套管理控制HTML文档的规则，而Document节点则是一种具象化的表现形式

  • 如果把整个HTML文档看成一个对象，那么这个对象就是Document节点，而如何操作控制这个对象的标准，就是DOM

  • DOM中规定HTML页面中所有的元素都是节点，可以通过Document点号运算符调用所有元素

  • Document节点又被称作Document对象，每个载入浏览器的HTML文档都会成为Document对象，document是HTML文档的根节点

因此，为了在脚本（Script）中操作页面，提出了Document节点和DOM规则

二, Document属性分类：

使用较多的属性有以下三类

  • 第一类：
    doctype，documentElement，body，head， 用于返回文档内部的某个节点

  • 第二类：
    documentURI，URL，domain，lastModified，location，title，readyState， 用于返回文档指定的信息

  • 第三类 ：
    anchors，forms，images，links，scripts， 用于返回文档内部特定节点的集合

Document节点属性：

document.title//设置文档标题，与HTNL中的title标签等价document.bgColor//设置页面背景颜色document.fgColor//设置页面前景色document.fileCreateDate//文件建立日期，只读属性document.fileModifiedDate//文件修改日期，只读属性document.URL//可返回当前文档的URLdocument.linkColor//未点击过的链接颜色doucment.alinkColor//鼠标在此链接上的颜色document.vlinkColor//已点击过的链接颜色document.charset//设置字符集，简体中文为gb2312document.fileSize//文件大小，只读属性document.cookies//设置和读出cookie
document的常用方法：

document.createElement(Tag)//创建HTML元素document.getElementById(ID)//获得指定id值的对象document.getElementByName(name)//获得name值的对象document.write()//动态向页面写内容document.body.appendChild(oTag)//向节点添加最后一个子节点
常用对象事件：

document.body.onclick=”func()” //鼠标指针单击对象是触发 document.body.onmouseover=”func()” //鼠标指针移到对象时触发 document.body.onmouseout=”func()” //鼠标指针移出对象时触发
body主体子对象：

document.body//指定文档主体的开始和结束,等价于body>/body>document.body.bgColor//设置或获取对象的背景颜色document.body.link//未点击过的连接颜色document.body.alink//鼠标在链接上时的颜色document.body.vlink//点击过的链接颜色document.body.text//文本颜色document.body.topMargin//页面上边距document.body.leftMargin //页面左边距 document.body.rightMargin //页面右边距 document.body.bottomMargin //页面下边距 documenr.body.background//背景图片document.body.appendChild(oTag)//动态生成一个Html对象

三、使用document

第一类属性

① 对于HTML文档来说，document对象一般有两个子节点，第一个子节点就是 docType（第二个是html）
docType节点是一个对象，包含了当前文档的类型信息，对于HTML5文档来说，docType节点就代表<!DOCTYPE html>

语法：document .docType;

② documentElement属性表示当前文档的根节点，通常是document的节点的第二个子节点，紧跟在document.docType节点后面
但是，一般情况下都是通过documentElement节点来访问当前页面中的其他子节点

语法：document .documentElement

③ body属性返回当前文档的body或frameset节点，如果不存在这样的节点则返回null

语法：document .body；

④head属性返回当前文档的head节点，如果当前文档有多个head，则返回第一个

语法：document .head；
第二类属性

①documentURI属性返回当前文档的网址，所有文档都具备该属性

语法：document .documentURI

②URL属性返回当前文档的网址，URL属性只有HTML文档才具备，该属性为只读属性不能写入

语法：document .URL

③domain属性返回当前文档的域名，如果无法获取域名则返回null

语法：document .domain

④lastModified属性返回当前文档（网页）最后修改的时间戳，格式为字符串

语法：document .lastModified

注意，lastModified属性的返回值是字符串，所以不能直接用于比较，如果要比较两个文档哪一个时间更新，则需要将其转换成时间戳格式
语法示例：Date.parse(doc1.lastModifyed)，Date.parse方法能够将时间格式的字符串转换成时间戳格式

⑤location属性返回一个只读对象，提供了当前文档的URL信息

document.location.href，返回完整的URL，可以写入（指定新网址）
document.location.protocol，返回当前遵守的协议
document.location.host，返回当前页面域名+端口号
document.location.hostname，返回当前页面域名
document.location.port，返回当前页面端口号
document.location.pathname，返回当前页面在服务器中的路径
document.location.search，返回当前页面URL中的查询字符串
document.location.assign('网页地址')，跳转到另一个网址（与第一种的用法有相似之处）

⑥location其他内容
以下方法效果相同，都能改变当前页面的URL

location.assign('传递一个URL')；
window.location = '传递一个URL'；
location.href = '传递一个URL'；（常用方式）reload():重新加载当前显示的页面
location.reload(false):  //优先从本地缓存重新加载location.reload(true):  //优先从服务器重新加载location对象的 search属性获取URL中保存的页面提交的字符串信息

⑦ title属性返回当前文档的标题，该属性是可写的

语法：document.title
写入信息时：document.title = '写入的标题'；

⑧ characterSet属性返回渲染当前文档的字符集，比如UTF-8、ISO-8859-1等

语法：document.characterSet

⑨readyState属性返回当前文档的状态，返回值包括三种：

loading: 表示加载HTML代码阶段，尚未完成解析
interactive: 表示加载外部资源阶段
complete:  表示全部加载完成
第三类属性

这些集合都是动态的，原节点有任何变化会立刻反映在集合中

  • ① anchors属性返回网页中所有指定了 name属性的 a标签元素

  • ②forms属性返回网页中所有的表单

  • ③images属性返回网页中所有的图片

  • ④ links属性返回网页中所有链接元素（带有href属性的 a标签）

  • ⑤ scripts属性返回网页中所有的脚本

<body>
    <a href="#" name="anchorFirst">链接first</a>
    <a href="#" >链接second</a>
    <a href="#" name="anchorThird">链接third</a><script>
    var coll=document.anchors;
    console.log(coll);  //打印所有定义了 name属性的 a标签元素，返回值为结合
    console.log(typeof coll);  //返回值类型为 Object
    console.log(coll[1]);  //打印指定的定义了 name属性的 a标签元素</script></body>

document选择页面元素
① querySelector()方法返回匹配指定的CSS选择器的元素节点，
如果多个节点满足匹配条件，则返回第一个匹配的节点
如果没有满足匹配条件的节点，则返回 null

语法：document .querySelector('元素选择器 | 类选择器 | id选择器');

② querySelectorAll()方法用来根据指定的选择器进行页面元素筛选
如果多个元素满足匹配条件，则返回这些元素构成的集合

语法：document .querySelectorAll('选择器名')；

返回值为一个节点列表，不是数组，但可以像数组一样使用列表
如果查找失败不是返回null，而是返回一个空的节点列表

③ 其他常用选择方式

getElementById()，返回匹配指定 id属性的元素节点getElementByTagName()，返回所有匹配指定标签的元素节点getElementByClassName()，返回符合指定类名的所有元素节点getElementByName()，返回匹配指定 name属性的所有元素节点

注意，上述方法中直接使用类名、id名等，并不是选择器名！！

document创建页面元素、属性

①createElement()，生成HTML元素节点

语法：var newElem=document .createElement(‘标签名’)；  //所创建节点名需使用引号

注意，该方法创建的页面元素不会直接显示在页面中，而是默认存储在内存中

② appendChild()，通过该方法将创建的元素添加到页面的指定父元素中

语法：父元素名 .appendChild(newElem)；

③ createTextNode()，该方法用于对新建元素添加内容，方法的参数为需要生成的文本内容节点

语法：var elemText=document .createTextNode(' 需要添加的文本节点内容 ')；
newElem .appendChild(elemText);

另外，还可以使用innerHtml属性设置或返回双标签之间的HTML内容

语法：元素节点（变量名）.innerHtml=' text ';

④ createAttribute()方法用于创建属性对象节点，返回值为属性本身

语法：var elemStyle=document.createAttribute(' 属性名 ')；
elemStyle .value='color : red';     // 使用 .value对属性赋值

⑤ setAttributeNode()方法用于将属性节点添加到元素中，进而实现元素的属性设置

语法：newElem.setAttributeNode(elemStyle);　

<script>
    var newElem=document.createElement('p');                        //创建<p>标签
    var elemText=document.createTextNode('祝天下单身狗情人节快乐！');   //创建元素内容节点
    newElem.appendChild(elemText);                          //将内容节点添加给<p>标签
    var elemAttrStyle=document.createAttribute('style');           //创建“style”属性
    // var elemAttrAlign=document.createAttribute('align');           //创建“align”属性
    elemAttrStyle.value=('color:red;text-align:center;font-size:25px');     //向“style”属性赋值
    // elemAttrAlign.value=('center');               //向“align”属性赋值
    newElem.setAttributeNode(elemAttrStyle);                //将“style”属性添加给<p>标签
    // newElem.setAttributeNode(elemAttrAlign);                //将“align”属性添加给<p>标签
    var body=document.querySelector('body');                       //选择页面<body>标签
    body.appendChild(newElem);                              //将<p>标签添加到页面body中</script>

操作元素属性的方法

操作Element节点的CSS样式，最简单的方法之一是使用节点对象的以下三种方法，进行读、写、删HTML元素的style属性

  • ①getAttribute()，获取Element属性，语法：元素节点 .getAttribute(' 属性名 ')；，返回值为属性值

  • ② setAttribute()，设置Element属性，语法：元素节点 .setAttribute(' 属性名 ' , ' 属性值 ')；

  • ③ removeAttribute()，删除Element属性，语法：元素节点 .removeAttribute(' 属性名 ')；

元素节点的style属性
Element节点本身也提供了style属性用于操作CSS样式，style属性指向一个对象，用于读写页面元素的行内CSS样式。

<script>
    var newElem=document.createElement('p');                        //创建<p>标签
    var elemText=document.createTextNode('祝天下单身狗情人节快乐！');   //创建元素内容节点
    newElem.appendChild(elemText);                          //将内容节点添加给<p>标签
    newElem.style.textAlign='center';
    newElem.style.backgroundColor='hotpink';
    newElem.style.borderBottom='2px solid darkgreen';
    newElem.style.color='blue';
    newElem.style.fontSize='25px';
    newElem.style.cssFloat='none';                          //float为JavaScript保留字
    document.body.appendChild(newElem);                            //将<p>标签添加到页面body中</script>

注意：元素的 style对象对应元素的 style属性，style对象中的样式与 style属性中的样式名称是一一对应的，但书写规则有一定差别

  • ① 将横杠（-）从CSS属性命中去除，然后将横杠后的第一个字母大写；

  • ② CSS属性名是JavaScript保留字的，需要在属性名之前加“css”字符串前缀；

  • ③ style对象的属性值都是字符串，包括计量单位

style属性的cssText用法
style对象的 cssText属性可以用来直接读、写、删整个 style属性

语法：元素节点 .style .cssText=' 样式 ';

<script>
    var newElem=document.createElement('p');                        //创建<p>标签
    var elemText=document.createTextNode('祝天下单身狗情人节快乐！');   //创建元素内容节点
    newElem.appendChild(elemText);                          //将内容节点添加给<p>标签
    newElem.style.cssText='text-align:center;color:blue;font-size:25px;border-bottom:2px solid darkgreen';
    document.body.appendChild(newElem);                              //将<p>标签添加到页面body中</script>

删除整个style属性可以使用<元素节点 .cssText=' ' >这种方式
cssText对应的是HTML元素的style属性，所以在书写时不需要改写属性名

style属性方法
style对象提供了三种方法分别读、写、删行内样式

  • ① setProperty()，设置样式，语法：元素节点 .style .setProperty(' propertyName ' , ' value ');

  • ② getPropertyValue()，获取样式，语法：元素节点 .style .getPropertyValue(' propertyName ');

  • ③ removeProperty()，删除样式，语法：元素节点 .style .removeProperty(' propertyName ');

<script>
    var newElem=document.createElement('p');                        //创建<p>标签
    var elemText=document.createTextNode('祝天下单身狗情人节快乐！');   //创建元素内容节点
    newElem.appendChild(elemText);                        //将内容节点添加给<p>标签
    var elemStyle=newElem.style;
    elemStyle.setProperty('text-align','center');
    var queryRes=elemStyle.getPropertyValue('text-align');
    console.log(queryRes);
    elemStyle.removeProperty('text-align');
    document.body.appendChild(newElem);                            //将<p>标签添加到页面body中</script>

四，举例应用

获取HTML元素对象

直接获取方式：通过id、通过name属性值、通过标签名、通过class属性值；
间接获取方式：父子关系、子父关系、兄弟关系；

1，getElementById(id)

<body> <div id=’divid’><p>h</p> Just for testing; 
</div> <div id=’divid’> Just for testing; 
</div> <script> var div=document.getElementById(‘divid’); 
alert(div.nodeName);</script> </body>

2、getElementsByName(name)

<body> <div name="george">f</div> <div name="george">f</div> <script type="text/javascript"> var georges=document.getElementsByName("george"); 
alert(georges.length); 
</script> </body>

3、getElementsByTagName(tagname)
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的`DOM结构，使用这种方法可以很容易的所有缩小范围。

<html> <head> <title></title> <script> 
    function start() { 
        // 获得所有tagName是body的元素（当然每个页面只有一个）          
       myDocumentElements=document.getElementsByTagName("body"); 
       myBody=myDocumentElements.item(0); 
        // 获得body子元素种的所有P元素 
        myBodyElements=myBody.getElementsByTagName("p");
        // 获得第二个P元素
        myP=myBodyElements.item(1); 
       //显示这个元素的文本 
        alert(myP.firstChild.nodeValue); 
    } 
</script> </head> <body onload="start()"> <p>hi</p> <p>hello</p> </body> </html>

4，appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点：

<div id="test"></div><script type="text/javascript">var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)</script>

上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”A new div”实现，不过innerHTML不属于DOM

5，removeChild(childreference)
移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

<div id="father"><div id="child">A child</div></div><script type="text/javascript">var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)</script>

6，cloneNode(deepBoolean)
复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制 当前节点的所有子节点，包括该节点内的文本。

<p id=”mypara”>11111</p>p=document.getElementById("mypara")pclone = p.cloneNode(true);p.parentNode.appendChild(pclone);

7，replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如：

<div id="adiv"><span id="innerspan">span</span></div><script type="text/javascript">var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);</script>

8，insertBefore(newElement, targetElement)
给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。

<body><span id="lovespan">熊掌我所欲也!</span></body><script type="text/javascript">var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="鱼与";</script>

9，click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数

<script>function wow() {
alert("我好象没有点鼠标啊");
}</script><div id="test" onclick='wow()'>hhh</div><script type="text/javascript">var div = document.getElementById("test");
div.click();</script>

操作HTML元素对象的属性

获取：--元素对象名.属性名//返回当前属性的属性值。---------固有--元素对象名.getAttribute("属性名");//返回自定义属性的值---------自定义修改：--元素对象名.属性名=属性值--对象名.setAttribute("属性名","属性值");//修改自定义属性的值-------自定义注意：--尽量的不要去修改元素的id值和name属性值。
使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取实时的用户数据。

操作HTML元素对象的内容和样式

获取元素对象
获取：--元素对象名.innerHTML//返回当前元素的所有内容，包括HTML标签--元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签修改：--元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会解析--元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果--元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

js操作元素样式

获取元素对象-通过style属性--元素对象名.style.样式名="样式值"//添加或者修改--元素对象名.style.样式名=“”//删除样式注意：以上操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式-通过className--元素对象名.className="新的值"--添加类选择器样式或者修改类选择器样式--元素对象名.className=""//删除类样式

document.getElementById("test").style.backgroundColor="yellow"

  • firstChild    返回第一个子节点

  • lastChild     返回最后一个子节点

  • parentNode   返回父节点的对象。

  • nextSibling   返回下一个兄弟节点的对象

  • previousSibling 返回前一个兄弟节点的对象

  • nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

例如

<div id='test'>ddd</div><script>if (document.getElementById("test").nodeName=="DIV")

   alert("This is a DIV");</script>

第一个例子：
使用DOM1.0   的javascript动态地创建一个HTML table。

<head><title>Sample code </title><script>

    function start() {

        //获得body的引用

        var mybody=document.getElementsByTagName("body").item(0);

        //创建一个<table></table>元素

        mytable = document.createElement("TABLE");

        //创建一个<TBODY></TBODY>元素

        mytablebody = document.createElement("TBODY");

        // 创建行列

        for(j=0;j<3;j++) {

//创建一个<TR></TR>元素

            mycurrent_row=document.createElement("TR");

            for(i=0;i<3;i++) {

    //创建一个<TD></TD>元素

                mycurrent_cell=document.createElement("TD");

//创建一个文本元素

                currenttext=document.createTextNode("cell is row "+j+", column "+i);

                //把新的文本元素添加到单元TD上

                mycurrent_cell.appendChild(currenttext);

                // appends the cell TD into the row TR

                //把单元TD添加到行TR上
                mycurrent_row.appendChild(mycurrent_cell);

            }

//把行TR添加到TBODY上

            mytablebody.appendChild(mycurrent_row);

        }

        // 把 TBODY 添加到 TABLE

        mytable.appendChild(mytablebody);

        // 把 TABLE 添加到 BODY

        mybody.appendChild(mytable);

        // 把mytable的border 属性设置为2

        mytable.setAttribute("border","2");

    }</script></head><body onload="start()"></body></html>

操作HTML的文档结构

增加结点
删除结点
第一种方式：使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点div.innerHTML=""//删除所有子节点父节点.removeChild(子节点对象)//删除指定的子节点

这是一个事实上的标准，不属于w3c DOM，但是几乎所有支持DOM的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。<p><b>新人类，什么？！</b></p><script type="text/javascript">window.onload=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>新新人类，什么？！</b>"

}</script>

获取元素对象var obj=document.createElement("标签名");元素对象名.appendChild(obj);

function testOper2(){//获取元素对象var showdiv=document.getElementById("showdiv");//创建input元素对象var inp=document.createElement("input");inp.type="file";//创建按钮元素对象var btn=document.createElement("input");btn.type="button";btn.value="删除";btn.onclick=function(inp);
    showdiv.removeChild(inp);
    showdiv.removeChild(btn);
    showdiv.removeChild(br);//创建换行符var br=document.createElement("br");//将创建的元素对象存放在div中showdiv.appendChild(inp);showdiv.appendChild(btn);showdiv.appendChild(br);}

document操作Form元素

获取form表单对象
        使用id：var fm=document.getElementById("fm");
        使用name属性：var frm=document.frm;获取form下的所有表单元素对象集合
        fm.elements
form表单的常用方法
        表单对象.submit();//提交表单数据form的属性操作：
        表单对象名.action="新的值"//动态的改变数据的提交路径
        表单对象名.method="新的值"//动态的改变提交方式

js表单元素的通用属性
    只读模式：            readonly="readonly"//不可以更改。但是数据可以提交
    关闭模式：
            disabled="disabled"//不可以进行任何操作，数据无法进行提交

js操作多选框、单选框
–被选中状态下在js中checked属性值为true，未选中状态为false；
js操作下拉框：
–被选择的option对象在js之中selected属性值为true，未选中为false

function Form(){
    //获取form表对象
    var fm=document.getElementById("fm");
    alert(fm);
    //使用form表单的name属性值来获取
    var frm=document.frm;
    alert(frm);}

document操作表格

删除行：
        行对象.rewIndex//返回行对象的脚标
        表格对象.deleteRow(要删除的行对象的脚标)

1、childeNodes  返回所有子节点对象,
例如

<table id="mylist"><tr><td>一个和尚有水喝。</td></tr><tr><td>两个和尚挑水喝。</td></tr><tr><td>三个和尚没水喝。</td></tr></table><script>var msg=””
var mylist=document.getElementById("mylist")

for (i=0; i<mylist.childNodes.length; i++){
   var tr=mylist.childNodes[i];

   for(j=0;j<tr.childNodes[j].length; j++) {
     var td=tr.childNodes[j];
      msg+=td.innerText;
   }
}

alert(msg);</script>



作者：响彻天堂
链接：https://www.jianshu.com/p/c46eacd21503
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


文章分类
后端
文章标签
javascript
document
对象
版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。
相关推荐