Dom 简单控制

最新推荐文章于 2022-08-05 10:16:27 发布

lvzk555

最新推荐文章于 2022-08-05 10:16:27 发布

阅读量4k

点赞数

文章标签：文档 html xhtml javascript xml table

本文链接：https://blog.csdn.net/lvzk555/article/details/7299636

版权

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

通过 DOM，可访问 HTML 文档中的每个节点

1、

getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。

这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素，getElementsByTagName() 会把它们全部找到，不管 <p> 元素处于文档中的哪个层次。同时，getElementById() 方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。

这两种方法会向您提供任何你所需要的 HTML 元素，不论它们在文档中所处的位置！

2、

parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。

对 firstChild 最普遍的用法是访问某个元素的文本

parentNode 属性常被用来改变文档的结构。

3、

有两种特殊的文档属性可用来访问根节点：

document.documentElement
document.body

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

4、

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）

(1)

nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

(2)

nodeValue

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

(3)

nodeType

nodeType 属性可返回节点的类型。

小例子：

js 隔行变色

<table id="tb">
        <tr>
        <td>第1行</td>
         </tr>
          <tr>
        <td>第2行</td>
         </tr>
          <tr>
        <td>第3行</td>
         </tr>
          <tr>
        <td>第4行</td>
         </tr>
          <tr>
        <td>第5行</td>
         </tr>
          <tr>
        <td>第6行</td>
         </tr>
</table>
<script type="text/javascript">
function chang(){
    var item1 = document.getElementById("tb");
    var tds =   item1.getElementsByTagName("td");
    for(var i=0;i < tds.length;i++){
        if(i%2==0){
            tds[i].style.backgroundColor = "#0FF";
        }
  if(i%2!=0){
            tds[i].style.backgroundColor = "#FF0";
        }
    }
}
chang();
</script>

lvzk555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom 简单控制

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。通过 DOM，可访问 HTML 文档中的每个节点1、getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。这两种方法会忽略文档的结构。假如您希望查找文档中所有的元素，getElementsB
复制链接

扫一扫