JavaScriptDOM节点

640 (1)
什么是 DOM？

DOM 是 W3C（万维网联盟）的标准，又称文档对象模型。

DOM 定义了访问 HTML 和 XML 文档的标准。

什么是 HTML DOM？

HTML DOM 是：

  • HTML 的标准对象模型
  • HTML 的标准编程接口
DOM节点

HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
节点类型

节点类型:    nodeType        nodeName        nodeValue

元素节点             1                 元素名                 null

文本节点             3                  #test                文本值

属性节点             2                属性名                属性值

注释节点             8              #comment        注释的文本

节点方法

image

节点属性
innerHTML

    获取元素内容的最简单方法是使用 innerHTML 属性

    innerHTML 属性对于获取或替换 HTML 元素的内容很有用

下面的代码获取 id="info" 的 <p> 元素的 innerHTML：

<html>
<body>
<p id="info">Hello qimuz</p>
<script>
var txt=document.getElementById("info").innerHTML;
document.write(txt);
</script>
</body>
</html>
nodeName

nodeName 属性规定节点的名称

  • nodeName 是只读的

  • 元素节点的 nodeName 与标签名相同

  • 属性节点的 nodeName 与属性名相同

  • 文本节点的 nodeName 始终是 #text

  • 文档节点的 nodeName 始终是 #document

nodevalue

nodeValue 属性规定节点的值

  • 元素节点的 nodeValue 是 undefined 或 null

  • 文本节点的 nodeValue 是文本本身

  • 属性节点的 nodeValue 是属性值

nodeType

nodeType 属性返回节点的类型,它是只读的

image

访问节点
  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法
  • 通过使用querySelector() 方法

querySelector() 方法仅仅返回匹配指定选择器的第一个元素,如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代

创建节点、添加节点
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>


<script>


var para = document.createElement("p"); //创建了一个新的 <p> 元素


var node = document.createTextNode("这是新文本。"); //这段代码创建了一个文本节点


para.appendChild(node); //向 <p> 元素追加这个文本节点




var element = document.getElementById("div1"); //查找一个已有的元素div1


element.appendChild(para); //向这个div1元素追加新元素


</script>


appendChild() 方法可追加新元素作为父亲的最后一个子元素，除此之外还可以使用 insertBefore() 方法


//父节点.insertBefore(新节点，指定节点)


删除节点


<div id="div1">


<p id="p1">这是一个段落。</p>


<p id="p2">这是另一个段落。</p>


</div>




<script>


var parent = document.getElementById("div1");


var child = document.getElementById("p1");


parent.removeChild(child); //从父元素删除子元素


</script>


parentNode 属性可以找到父元素


var child = document.getElementById("p1");


child.parentNode.removeChild(child);


修改节点


<div id="div1">


<p id="p1">这是一个段落。</p>


<p id="p2">这是另一个段落。</p>


</div>




<script>


var para = document.createElement("p");


var node = document.createTextNode("这是新文本。");


para.appendChild(node);




var parent = document.getElementById("div1");


var child = document.getElementById("p1");


parent.replaceChild(para, child); //从父元素删除子元素


</script>


timg


明天介绍DOM事件吧~~~


640







            

            
posted @ 
2020-04-08 22:20 
齐木子 
阅读(291) 
评论(0) 
编辑 
收藏 
举报