前端基础笔记

【javascript】DOM—节点层次—Document类型

2017-11-29  本文已影响3人  shanruopeng

Document类型

1、文档的子节点

<html>
    <body>
    
    </body>
</html>
var html = document.documentElement; //取得对<html>的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
var body = document.body; //取得对<body>的引用
var doctype = document.doctype; //取得对<!DOCTYPE>的引用

浏览器对document.doctype 的支持差别很大,可以给出如下总结。

2、文档信息

//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";
//取得完整的URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的URL
var referrer = document.referrer;
//假设页面来自p2p.wrox.com 域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 出错!
//假设页面来自于p2p.wrox.com 域
document.domain = "wrox.com"; //松散的(成功)
document.domain = "p2p.wrox.com"; //紧绷的(出错!)

3、查找元素

<html>
    <head>
        <title>getElement</title>
    </head>
    <body>
        <div id="myDiv" class = "example">Some text</div>
       <img src="myimage.gif" name="myImage" alt ="myimg">
       <fieldset>
            <legend>Which color do you prefer?</legend>
            <ul>
                <li>
                    <input type="radio" value="red" name="color" id="colorRed">
                    <label for="colorRed">Red</label>
                </li>
                <li>
                    <input type="radio"value="green" name="color" id="colorGreen">
                    <label for="colorGreen">Green</label>
                </li>
                <li>
                    <input type="radio" value="blue" name="color" id="colorBlue">
                    <label for="colorBlue">Blue</label>
                </li>
            </ul>
    </fieldset>
    </body>
</html>
//getElementById(),接收一个参数:要取得的元素的ID,严格区分大小写。
//如果页面中多个元素的ID 值相同,getElementById()只返回文档中第一次出现的元素。
var div = document.getElementById("myDiv"); 

/**getElementsByTagName()。这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的NodeList**/
var images = document.getElementsByTagName("img");

alert(images.length); //输出图像的数量
alert(images[0].src); //输出第一个图像元素的src 特性
aler t(images.item(0).src); //输出第一个图像元素的src 特性

//使用namedItem()方法可以通过元素的name特性取得集合中的项。
var myImage = images.namedItem("myImage");

//HTMLCollection 还支持按名称访问项
var myImage = images["myImage"];

//取得文档中的所有元素
var allElements = document.getElementsByTagName("*");

//返回带有给定name 特性的所有元素
var radios = document.getElementsByName("color");

//获取指定类名的所有元素
var div = document.getElementsByClassName("example");

4、特殊集合

5、文档写入

<html>
    <head>
        <title>document.write() Example</title>
    </head>
    <body>
        <p>The current date and time is:
        <script type="text/javascript">
            document.write("<strong>" + (new Date()).toString() + "</strong>");
        </script>
        </p>
    </body>
</html>
<html>
    <head>
        <title>document.write() Example 3</title>
    </head>
    <body>
        <script type="text/javascript">
        document.write("<script type=\"text/javascript\" src=\"file.js\">" +
        "<\/script>");
        </script>
    </body>
</html>
好好学习
上一篇 下一篇

猜你喜欢

热点阅读