javascript操作Document对象

最新推荐文章于 2024-09-20 10:29:51 发布

bboyjoe

最新推荐文章于 2024-09-20 10:29:51 发布

阅读量4.5k

点赞数 1

分类专栏： javascript 文章标签：前端网页设计 javascript html5

本文链接：https://blog.csdn.net/bboyjoe/article/details/46896059

版权

javascript 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

1）Document元数据属性：

characterSet——返回文档的字符集编码，这是一个只读属性；

charset——获取或设置文档的字符集编码；

compatMode——获取文档的兼容性模式（CSS1Compat、BackCompat）；

cookie——获取或设置当前文档的cookie；

defaultCharset——获取浏览器所使用的默认字符编码；

defaultView——返回当前文档的window对象；

dir——获取或设置文档的文本方向；

domain——获取或设置当前文档的域名；

implementation——提供可用DOM功能的信息(重点关注hasFeature方法)；

lastModified——返回文档的最后修改时间（如果修改时间不可用则返回当前时间）；

location——提供当前文档的URL信息；

readyState——返回当前文档的状态，这是一个只读属性（loading、interaction、complete）；

referrer——返回链接到当前文档的文档URL（就是对应HTTP标头的值）；

title——获取或设置当前文档的标题；

2）使用location对象

protocol——获取或设置文档URL的协议部分；

host——获取或设置文档URL的主机和端口部分；

href——获取或设置当前文档的地址；

hostname——获取或设置文档URL的主机名部分；

port——获取或设置文档URL的端口部分；

pathname——获取或设置URL的路径部分：

search——获取或设置文档URL的查询（问号串）部分；

hash——获取或设置文档URL的锚（#号串）部分；

assign(<URL>)——导航到指定的URL上；

replace(<URL>)——清除当前文档并导航到URL所指定的那个文档；

reload()——重新载入当前的文档；

resolveURL(<URL>)——将指定的相对URL解析成绝对URL；

3）获取HTML元素对象

3.1）使用属性获取元素对象

activeElement——返回一个代表当前带有键盘焦点的元素；

body——返回一个代表body元素的对象；

Embeds、plugins——返回所有代表embed元素的对象；

forms——返回所有代表form元素的对象;

head——返回一个代表head元素的对象；

images—返回所有代表img元素的对象；

links——返回所有代表文档里具备href属性的a和area元素的对象；

scripts——返回所有代表script元素的对象；

3.2）使用数组获取指定id值的对象或指定name值得对象集合

例：var elems=document["apple"],浏览器先去寻找id="apple"的元素，没有则再寻找name="apple"的元素；

3.3）搜索对象

getElementById(<id>)——返回带有指定id值的元素；

getElementsByClassName(<class>)——返回带有指定class值的元素；

getElementsByName(<name>)——返回带有指定name值的元素；

getElementsByTagName(<tag>)——返回指定类型的元素；

querySelector(<selector>)——返回匹配指定CSS选择器的第一个元素；

querySelectorAll(<selector>)——返回匹配指定CSS选择器的所有元素；

4)在DOM树里导航

chiladNodes——返回子元素组；

firstChild——返回第一个子元素；

hasChildNodes()——如果当前元素有子元素就返回true；

lastChild——返回倒数第一个子元素；

nextSibling——返回定义在当前元素之后的兄弟元素；

parentNode——返回父元素；

previousSibling——返回定义在当前元素之前的兄弟元素；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <style type="text/css">
        pre{
            border:medium double green;
        }
    </style>
</head>
<body>
<button id="btn1">点击</button>
<button id="btn2">访问新浪</button>
<p id="p1">
    远地本着“构筑诚信，永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
    远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，
    帮助客户实现稳定、安全的财富增值，帮助更多优秀的中小型企业融资成功。
</p>
<img id="sohu" class="img" name="xw" src="images/xw_sohu.png" alt="sohu"/>
<p id="p2">
    远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
    战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
    并与100多家企业建立长期战略伙伴的合作关系。
</p>
<p id="cookiedata"></p>
<button id="write">Add Cookie</button>
<button id="update">Update Cookie</button>
<button id="ready">ReadyState</button>
<pre id="results"></pre>
<pre id="results2"></pre>
<pre id="results3"></pre>
<pre id="results4"></pre>
<pre id="results5"></pre>
<pre id="results6"></pre>
<img id="xw" class="img" src="images/xw_china.png" alt="新闻网图标"/>
<p id="buttons">
    <button id="parent">Parent</button>
    <button id="child">First child</button>
    <button id="prev">prev sibling</button>
    <button id="next">next sibling</button>
</p>
<p id="tblock">
    远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神，已为200多家企业包括国企、民企和院所提供了企业转型升级、
    战略规划设计、<span id="jt">集团组建</span>、组织管理、质量管理体系、
    <span id="rl">人力资源管理体系</span>、财务风险管控和<span id="qy">企业综合咨询等服务</span>。
    并与100多家企业建立长期战略伙伴的合作关系。
</p>
<script>
    //document对象示例
    document.writeln("<pre>URL:"+ document.URL);
    var elems=document.getElementsByTagName("p");
    for(var i=0;i<elems.length;i++){
        document.writeln("Element ID:"+elems[i].id);
        elems[i].style.border="medium double black";
        elems[i].style.padding="4px";
    }
    //document对象元数据
    document.writeln("</pre>");
    document.writeln("<pre>");
    document.writeln("characterSet:"+document.characterSet);
    document.writeln("charset:"+document.charset);
    document.writeln("compatMode:"+document.compatMode);
    document.writeln("defaultCharset:"+document.defaultCharset);
    document.writeln("dir:"+document.dir);
    document.writeln("domain:"+document.domain);
    document.writeln("lastModified:"+document.lastModified);
    document.writeln("referrer:"+document.referrer);
    document.writeln("title:"+document.title);
    //location对象
    document.writeln("protocol:"+document.location.protocol);
    document.writeln("host:"+document.location.host);
    document.writeln("hostname:"+document.location.hostname);
    document.writeln("port:"+document.location.port);
    document.writeln("pathname:"+document.location.pathname);
    document.writeln("search:"+document.location.search);
    document.writeln("hash:"+document.location.hash);
    document.writeln("</pre>");
    //使用location对象导航到其他地方
    document.getElementById("btn1").οnclick=function(){
        document.location.hash="xw";
    }
    //使用location对象导航到其他文档
    document.getElementById("btn2").οnclick=function(){
        document.location.assign("http://www.sina.com.cn");
    }
    //读取和写入cookie
    var cookieCount=0;
    document.getElementById("update").οnclick=updateCookie;
    document.getElementById("write").οnclick=createCookie;
    readCookies();
    function readCookies(){
        document.getElementById("cookiedata").innerHTML=document.cookie;
    }
    function createCookie(){
        cookieCount++;
        document.cookie="Cookie_"+cookieCount+"=Value_"+cookieCount;
        readCookies();
    }
    function updateCookie(){
        document.cookie="Cookie_"+cookieCount+"=Updated_"+cookieCount;
        readCookies();
    }
    //document.readyState属性
    document.onreadystatechange=function(){
        if(document.readyState=="interactive"){
            document.getElementById("ready").οnclick=function(){
                document.getElementById("results").innerHTML="用户已经点击";
            }
        }
    }
    //获取DOM的实现情况
    var features=["Core","HTML","CSS","Selectors-API"];
    var levels=["1.0","2.0","3.0"];
    document.writeln("<pre>");
    for(var i=0;i<features.length;i++){
        document.writeln("checking for feature:"+features[i]);
        for(var j=0;j<levels.length;j++){
            document.write(features[i]+"Level"+levels[j]+":");
            document.writeln(document.implementation.hasFeature(features[i],levels[j]));
        }
    }
    document.write("</pre>");

</script>
<script>
    //使用属性获取元素对象
    var results2Element=document.getElementById("results2");
    var Imgelems=document.images;
    for(var i=0;i<elems.length;i++){
        results2Element.innerHTML+="Image Element:"+Imgelems[i].id+"\n";
    }
    var srcValue=Imgelems.namedItem("sohu").src;
    results2Element.innerHTML += "Src for sohu element is:"+srcValue+"\n";
</script>
<script>
    //使用数组标记获取已命名元素
    var results3Element=document.getElementById("results3");
    var xwElems=document["xw"];
    if(xwElems.namedItem){
        for(var i=0;i<xwElems.length;i++){
            results3Element.innerHTML+="Image Element:"+xwElems[i].id+"\n";
        }
    }else{
        results3Element.innerHTML += "Src for  element is:"+xwElems.src+"\n";
    }
</script>
<script>
    //搜素元素：使用document.getElement开头的方法
    var results4Element=document.getElementById("results4");
    var pElems=document.getElementsByTagName("p");
    results4Element.innerHTML+="这里有"+pElems.length+"个p元素\n";
    var imgElems=document.getElementsByClassName("img");
    results4Element.innerHTML+="这里有"+imgElems.length+"个class=img的元素\n";
    var nameElems=document.getElementsByName("xw");
    results4Element.innerHTML+="这里有"+nameElems.length+"个name=xw的元素\n";
</script>
<script>
    //搜素元素：使用CSS选择器获取元素对象
    var results5Element=document.getElementById("results5");
    var Elems=document.querySelectorAll("p,img#xw");
    results5Element.innerHTML+="这里有"+Elems.length+"个匹配的元素\n";
</script>
<script>
    //在DOM树里导航
    var results6Element=document.getElementById("results6");
    var element=document.getElementById("tblock");
    var buttons=document.getElementById("buttons").getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].οnclick=handleButtonClick;
    }
    processNewElement(element);
    function handleButtonClick(e){
        if(element.style){
            element.style.backgroundColor="white";
        }
        if(e.target.id=="parent" && element!=document.body){
            element=element.parentNode;
        }else if(e.target.id=="child" && element.hasChildNodes()){
            element=element.firstChild;
        }else if(e.target.id=="prev" && element.previousSibling){
            element=element.previousSibling;
        }else if(e.target.id=="next" && element.nextSibling){
            element=element.nextSibling;
        }
        processNewElement(element);
        if(element.style){
            element.style.backgroundColor="blue";
        }
    }
    function processNewElement(elem){
        results6Element.innerHTML="Element Type:"+elem+"\n";
        results6Element.innerHTML+="Element id:"+elem.id+"\n";
        results6Element.innerHTML+="Has child nodes:"+elem.hasChildNodes()+"\n";
        if(elem.previousSibling){
            results6Element.innerHTML+=("Prev sibling is:"+elem.previousSibling+"\n");
        }else{
            results6Element.innerHTML+=(" NO Prev sibling\n");
        }
        if(elem.nextSibling){
            results6Element.innerHTML+=("Next sibling is:"+elem.nextSibling+"\n");
        }else{
            results6Element.innerHTML+=(" NO next sibling\n");
        }

    }
</script>
</body>
</html>