JS之文档对象模型DOM_xml

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>History和Location使用</title>

</head>

<body>

<input type="button" value="返回" onclick="history.back();" />

</body>

</html>

DOM 解析模型,将文档加载到 内存,形成一个树形结构 <html> 就是根节点,每个标签会成为一个元素节点、标签的属性成为属性节点,标签内部的文本内容成为文本节点

注意:属性节点,它不属于DOM树形结构,不属于任何节点父节点,也不属于任何节点的子节点 ,属性节点依附于元素节点上 一种附加节点

【上面代码 产生6个元素节点,5个属性节点,9个文本节点】

HTML 本身也是 XML,所有可以使用XML DOM API规范

DOM Element

DOM Attr

DOM Text

DOM Document

HTML DOM是对XML DOM的扩展, HTML DOM比XML DOM 开发JS来说更加简单方便!

HTML DOM最优秀的地方是,操作form对象和table数据

1.BOM和HTML DOM关系图

JS之文档对象模型DOM_子节点_02

学习DOM 编程,从Document对象开始,document代表当前HTML网页文档对象,是window对象一个属性,可以直接使用 ,所有HTML DOM对象都是Document子对象

2.DOM编程开发

window.document 代表整个HTML文档

①:​通过document获得Node节点对象

document.forms 获得页面中所有form元素集合

document.body 访问页面中<body> 元素

document.cookie 用JS操作网页cookie信息

全局检索提供了三个重要的方法:

document.getElementById():通过id属性检索,获得Node节点(Element元素)

document.getElementsByName 通过name 属性检索 ,获得NodeList

document.getElementsByTagName 通过标签元素名称 获得NodeList

其中NodeList可以作为数组进行操作

Demo:​在每一个h1标签后追加itcast

<script type="text/javascript">

//在每一个h1标签内追加一个itcast

window.onload = ​function​(){

var​nodeList = document.getElementsByTagName("h1");

for​(​var​i=0; i<nodeList.length;i++){

// ​var​h1 = nodeList[i];

var​h1 = nodeList.item(i);

alert(h1.innerHTML);

h1.innerHTML += "itcast";

}

}

</script>

<body>

<h1>AAA</h1>

<h1>BBB</h1>

<h1>CCC</h1>

<h1>DDD</h1>

</body>

②:​获得node后

如果node是元素,去操作里面的文本内容 innerHTML (HTML页面内所有元素,一定是HTML 元素,innerHTML 是所有HTML元素通用属性 )

XML 取得一个元素内部文本内容 element.firstChild.nodeValue(看批注32)

③:​通过节点Node相对位置关系访问元素

childNodes

firstChild

lastChild

nextSibling

parentNode

previousSibling

用2种方式打印——明天休息

<h1id="h1">明天休息</h1><br>

var​h1 = document.getElementById("h1");

alert(h1.innerHTML);//方式一

alert(h1.firstChild.nodeValue);//方式二

3.DOM元素常见操作

DOM 获取节点​:节点查询 参上

DOM 改变节点:​元素属性修改setAttribute(name,value)

内部文本元素的修改 innerHTML

DOM 删除节点:​removeChild 删除子元素 、removeAttribute(name)删除节点指定属性

* 要删除节点o o.parentNode.removeChild(o)

DOM 替换节点​:replaceChild:父节点.replaceChild(新节点,被替换节点) ;

如果对于一个已经存在节点,执行 appendChild、 replaceChild都会造成该节点一个移动效果,可以采取先克隆再复制来消除此效果。

DOM 创建节点:​document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点

DOM 添加节点​ appendChild 父元素.appendChild(新的子节点) ;

insertBefore 父节点.insertBefore(新子节点, 已经存在子节点)

DOM 克隆节点​ 源节点.cloneNode(true); 该方法可以返回一个节点的克隆节点, 克隆节点包含原节点的属性和子元素

此节内容有大量的练习,建议大家做写,增强代码的熟练度。