javascript获取Document类型和Element类型属性

DOM


节点层次:
Document类型

JavaScript 通过 Document 类型表示文档。在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。

1、文档子节点
可以使用document.documentElement属性,该属性始终指向HTML页面中元素。另一个就是通过 childNodes 列表访问文档元素,但通过 documentElement 属性则能更快捷、更直接地访问该元素

两种方法:
document.documentElement;
document.childNodes[0];
document.firstChild;
输出结果是获取所有页面所有元素

 



ssss
 


document还有一个body属性可以直接指向html中元素
var body = document.body;//取得对的引用
所有浏览器都是支持document.documentElement;和document.body;这两个属性的。

2、文档信息
document.title;获取文档标题信息,可以修改这个标题信息:document.title = "这是一个测试";
document.URL;//取得完整的 URL
document.domain;//取得域名
document.referrer;//取得来源页面的 URL

3、查找元素
document.getElementById("");接收一个参数:要取得的元素的 ID。如果找到相应的元素则返回该元素,如果不存在带有相应 ID 的元素,则返回 null。

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

document.getElementsByName("");这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的 name 特性,


 





Which color do you prefer?















4、特殊集合
除了属性和方法, document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式,包括:
document.anchors,包含文档中所有带 name 特性的元素;
document.applets,包含文档中所有的元素,因为不再推荐使用元素,所以这个集合已经不建议使用了;
document.forms,包含文档中所有的
元素,与 document.getElementsByTagName("form")得到的结果相同;
document.images,包含文档中所有的元素,与 document.getElementsByTagName("img")得到的结果相同;
document.links,包含文档中所有带 href 特性的元素
 
5、文档写入
document将输出流写入到网页中。
write(),writeln(),open()和close();
write()和writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符
串的末尾添加一个换行符(\n)。在页面被加载的过程中,可以使用这个两个方法向页面中动态地加入内容。
实例:


 




The current date and time is:

 




 


Element类型

Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap 对象中。
getNamedItem(name):返回 nodeName 属性等于 name 的节点;
removeNamedItem(name):从列表中移除 nodeName 属性等于 name 的节点;
setNamedItem(node):向列表中添加节点,以节点的 nodeName 属性为索引;
item(pos):返回位于数字 pos 位置处的节点。


 










//获取div 元素
var div = document.getElementById("myDiv")

1、取得特性
div.getAttribute("id");
div.getAttribute("align");
div.getAttribute("my_special_attribute");
2、设置特性
div.setAttribute("id","test");
div.setAttribute("align","test");
div.setAttribute("my_special_attribute","test");
3、移除特性
div.removeAttribute("id");
4、attributes 属性
div.attributes.id.value;//myDiv
div.attributes.getNamedItem("id").nodeValue;//myDiv
div.attributes["id"].nodeValue;//myDiv
5、设置新的值
element.attributes["id"].nodeValue = "someOtherId";
6、删除特性
element.attributes.removeNamedItem("id");
7、创建元素
使用document.createElement()方法可以创建新元素
var userName = document.createElement("input");
添加属性
userName.setAttribute("id","userName");
userName.setAttribute("name","userName");
userName.setAttribute("value","liuwenlaing");

userName:

通过appendChild()、 insertBefore()或 replaceChild()把新元素添加到文档树中。
var div = document.getElementById("myDiv");
div.appendChild(userName);
div:
//

直接创建元素信息:
var div = document.createElement("
");
8、元素的子节点

 
 



  • Item 1

  • Item 2

  • Item 3






for(var i = 0 ; i < items.length;i++){
console.log(items[i]); 
}

  • Item 1

  • Item 2

  • Item 3

  • 这里
      的后代中只包含直接子元素。不过,如果它包含更多层次的后代元素,那么各个层次中包含的
    • 元素也都会返回。 

      你可能感兴趣的:(javascript)