CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛
CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛
CXYVIP官网源码交易平台_网站源码_商城源码_小程序源码平台-丞旭猿论坛

第41节Document文档节点-Javascript-源码交易平台丞旭猿

本内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。

Document 接口描述了任何类型的文档的通用属性与方法,根据不同的文档类型(例如HTML、XML)提供了不同的API,比如,使用 “text/html” 作为内容类型的HTML文档,实现了 HTMLDocument,而XML文档则实现了XMLDocument,HTMLDocument和XMLDocument接口都是继承自Document接口;

Javascript通过Document类型表示文档;在浏览器中,document对象是Document的一个实例,更具体一点,是HTMLDocument的一个实例,其表示整个HTML页面;并且document对象也是window对象的一个属性,可以将其作为全局对象来访问;因此document对象,既属于BOM又属于DOM的对象;

Document节点的特征:

  • nodeType的值为9
  • nodeName的值为document
  • nodeValue的值为null
  • parentNode的值为null

其子节点可能是一个DocumentType(最多一个)、Element(最多一个,即html)、ProcessingInstruction或Comment;

console.log(document);// 在FF控制台可以看出是属于HTMLDocument类型console.log(document.nodeType);// 0console.log(document.nodeName);// documentconsole.log(document.nodeValue);// nullconsole.log(document.parentNode);// nullconsole.log(document.childNodes.length);// 2

文档的子节点:

DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment;

<htmllang="en"><head><title>Documenttitle>head><body><script>console.log(document.childNodes);// 使用FF查看 NodeList(3)script>body>html>

documentElement属性:

返回文档直接子节点,始终指向HTML页面中的元素,也就是文档的根元素,并且它一定是文档的根元素;

// 注意:在HTML中的第二行有可能是注释console.log(document.childNodes[2]);// console.log(document.documentElement);// console.log(document.lastChild);// 

借助这个只读属性,能方便地获取到任意文档的根元素;

body属性:

作为HTMLDocument的实例,document对象还有一个body属性,直接指向;

console.log(document.body);

对于一个拥有元素的文档来说,返回的是最外层的元素;

另外,该属性是可写的,且为该属性赋的值必须是一个元素;

// 如果HTML结构为body id="oldBody",则:console.log(document.body.id);// oldBodyvarnewBody =document.createElement("body");
newBody.id ="newBody";document.body = newBody;console.log(document.body.id);// newBody

head属性:

指向元素,这个Document对象扩展的一个属性,类型为HTMLHeadElement;

如果有多个元素,则返回第一个;

document.head 是个只读属性,为该属性赋值只会静默失败,如果在严格模式中,则会抛出TypeError异常;

需要注意的是,如果文档源代码中未显式的包含和元素,浏览器将隐式的创建它们;

doctype属性:

该属性是DocumentType 类型,表示了一个包含文档类型的节点对象,指向标签;

文档当中最多只有一个DocumentType元素;

console.log(document.doctype);  //html>console.log(document.doctype.nextSibling); //<html>console.log(document.childNodes[0]); //html>

如果存在文档声明,则将其作为document的第一个子节点,解析DOCUMENTTYPE_NODE类型,如果没有声明,则为null;

注:DocumentType对象不能动态创建,它是只读的;

查找元素(选取文档元素):

在DOM中,取得特定的某个或某组元素,并执行一些操作,这是最重要的应用了;

为了获取文档中的这些元素Element对象,DOM定义了许多方式,如:用指定的id属性、name属性、标签名、CSS类或CSS选择器;

取得元素的操作可以使用document对象的几个方法来完成;Document类型为此提供了两个方法;

getElementById()方法:

该方法接收一个参数,即要获取的元素的ID;如果找到就返回这个元素,类型是HTMLElement,如果不存在,则返回null;该参数ID是区分大小写的;

如果页面中多个元素的ID值相同,只返回文档中第一次出现的元素;

varmydiv =document.getElementById("mydiv");console.log(mydiv);
可以封装一个通过ID查找多个元素的函数,如:/**
* 函数接受任意多的字符串参数
* 返回一个对象
* 如果一个id对应的元素未定义,则抛出错误
*/functiongetElements(/*ids...*/){varelements = {};// 一个空map映射对象for(vari=0; i<arguments.length; i++){varid =arguments[i];varelt =document.getElementById(id);if(elt ==null)thrownewError("No element with id:"+ id);
        elements[id] = elt;
    }returnelements;
}console.log(getElements("mydiv","mylist"));console.log(getElements("mydiv","mylist")["mydiv"]);

getElementById方法不会搜索不在文档中的元素;当创建一个元素,并且分配ID后,必须要使用appendChild、insertBefore等方法把元素插入到文档中,之后才能使用getElementById()方法获取到;

varelt =document.createElement("div");
elt.id ="myelt";document.body.appendChild(elt);// myelt,添加到文档对后,才能被获取到到varel =document.getElementById("myelt");console.log(el);// null

getElementsByName()方法:

返回给定name 属性的所有元素NodeList集合对象;

varmytexts =document.getElementsByName("mytext");console.log(mytexts);// dom2.html:17 NodeList(2) [p, div]

该方法定义在HTMLDocument类中,而不在Document类中,所以它只针对HTML文档可用,也就是只有HTMLDocument类型才有的方法,在XML文档中不可用;

<fieldset><legend>选择你最喜欢的城市legend><ul><li><inputtype="radio"value="北京"name="city"id="beijing"/><labelfor="beijing">北京label>li><li><inputtype="radio"value="南京"name="city"id="nanjing"/><labelfor="nanjing">南京label>li><li><inputtype="radio"value="蚌埠"name="city"id="bengbu"/><labelfor="bengbu">蚌埠label>li>ul>fieldset><script>varcitys =document.getElementsByName("city");console.log(citys);script>

该方法返回的是NodeList对象,在NodeList中返回的元素按照在文档中的顺序排序的,所以可以使用方括号语法来取得每个元素;

console.log(document.getElementsByName("city")[0]);

但IE与Edge返回的是HTMLCollection;但namedItem()方法是属于HTMLCollection类型的,所以,非IE调用namedItem()方法会抛出异常;并且在IE中namedItem()只会返回第一项,因为每一项的name特性都是相同的;

console.log(citys.namedItem("city"));

为某些HTML元素设置name属性,将自动在windows对象中创建对应的属性,对Document对象也是类似的;比如,为

© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容