JavaScript之DOM

最新推荐文章于 2024-10-02 05:39:15 发布

螺丝编程

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量290

点赞数

分类专栏：前端技术文章标签： javascript 结构文档对象

本文链接：https://blog.csdn.net/AkameMo/article/details/53959354

版权

前端技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript文档对象模型DOM
DOM 解析模型，将文档加载到内存，形成一个树形结构就是根节点，每个标签会成为一个元素节点、标签的属性成为属性节点，标签内部的文本内容成为文本节点
注意：属性节点，它不属于DOM树形结构，不属于任何节点父节点，也不属于任何节点的子节点，属性节点依附于元素节点上一种附加节点

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);  该方法可以返回一个节点的克隆节点， 克隆节点包含原节点的属性和子元素

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种方式打印——明天休息
<h1 id="h1">明天休息</h1> <br>
var h1 = document.getElementById("h1");
alert(h1.innerHTML);//方式一
alert(h1.firstChild.nodeValue);//方式二