javascript学习(7)Dom

最新推荐文章于 2024-08-02 08:30:00 发布

gongth_12

最新推荐文章于 2024-08-02 08:30:00 发布

阅读量723

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/gongth_12/article/details/8806884

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

DOM:将HTML看做XML来处理，代表着动态HTML真正的跨平台的，语言独立的解决方案的重要转变
动态HTML:简言之：是HTML动起来，是一种综合性的技术
DOM诞生的催化剂

document.documentElement:返回HTML根元素
var ohtml = document.documentElement;
alert(ohtml.nodeName);
firstChild：获取下级节点的第一个节点的节点名称
ohtml.firstChild.nodeName也可以使用
ohtml.childNodes[0].nodeName
lastChild：获取下级节点的最后一个节点的节点名称
childNodes[0]：获取某个节点的节点列表中的第一个节点
ohtml.childNodes[0].nodeName
childNodes.item(0)：和上面的作用一样
childNodes.length：获取子节点数量(第一级子节点)
ohtml.childNodes.length

parentNode：获取节点的父节点
var ohtml = document.documentElement;
    var ohead = ohtml.childNodes[0];
    var obody = ohtml.childNodes[1];
         alert(ohead.parentNode.nodeName);
         alert(obody.parentNode==ohtml);
previousSibling：同级节点的上一个节点
nextSibling：同级节点的下一个节点
ownerDocument：指向节点所在的文档
    var ohtml = document.documentElement;
            var ohead = ohtml.childNodes[0];
            var obody = ohtml.childNodes[1];
            alert(obody.previousSibling.nodeName);
            alert(ohead.nextSibling.nodeName);
访问特性的另外三个方法

getAttribute(name)：获取节点中属性为name的属性(Attribute)
var li = document.getElementById('li1').childNodes[0];
alert(li.getAttribute('href'));
setAttribute(name,newvalue):将节点中属性为name的属性值更改为newvalue
li.setAttribute('href','http://www.baidu.com')
removeAttribute(name):删除节点中名称为name的属性
访问指定节点

getElementsByTagName()：返回一个列表，这些列表的特点是<后面的节点名称相同
        var items = document.getElementsByTagName('a');
            for (var i = 0; i < items.length; i++) {
                alert(items[i].getAttribute('href'));
            }
getElementsByName()：获取name属性的值相同的元素，在选择单选按钮时很好用
getElementById()
注意:如果给定的元素匹配某个元素的name属性的值，则也会返回这个元素，当然如果有匹配的ID值，首先返回此元素，如果没有这个元素，则返回name属性的值匹配的元素
这一点在IE8中依然存在，算是IE的一个bug

操作节点

createElement():创建节点
createTextNode():创建文本节点
appendChild()

removeChild()：最好使用节点的parentNode属性来删除节点
function deletenode() {
            var op = document.body.getElementsByTagName('p')[0];
            op.parentNode.removeChild(op);
        }
    </script>
</head>
<body οnlοad="deletenode();">

在客户端通过js脚本动态创建的节点，是不能通过js程序访问的，比如替换，删除，能够操作(替换，删除)的节点必须不是动态创建的，也就是查看源文件时能够看到的html节点
注：纯属个人见解，后果自负

replaceChild()：注意，第1个参数为新节点，第2个参数为旧节点
function replacenode() {
            var op = document.createElement("p");
            var otext = document.createTextNode('世界你好');
            op.appendChild(otext);
            var oldop =   document.body.getElementsByTagName("p")[0];
            alert(oldop.toString());
            oldop.parentNode.replaceNode(op, oldop);
        }
appendChild():新消息出现在老消息之后
function replacenode() {
            var op = document.createElement("p");
            var otext = document.createTextNode('世界你好');
            op.appendChild(otext);
            document.body.appendChild(op);
        }
createDocumentFragment()：将多次操作合并为一次执行,通过100000条数据的测试没有发现速度有所提升，反倒慢了。。。

gongth_12

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习(7)Dom

DOM:将HTML看做XML来处理，代表着动态HTML真正的跨平台的，语言独立的解决方案的重要转变动态HTML:简言之：是HTML动起来，是一种综合性的技术DOM诞生的催化剂document.documentElement:返回HTML根元素 var ohtml = document.documentElement; alert(ohtml.nodeName);firs
复制链接

扫一扫

专栏目录