JS之DOM

作者: 好奇的猫猫猫 | 来源:发表于2018-09-20 13:02 被阅读0次

    获得当前子节点childNodes:把文本内容也当成了节点之一
    文本内容也是属于节点的子节点
    解决方法:使用children:包含了节点 不包含文本
    获得标签的首个子节点:firstChild,获得的首节点是文本节点
    firstElementChild:获得的真正的标签节点
    注意:获得子节点分为两种
    1.将文本内容也当成节点之一
    childNodes
    firstChild
    lastChild
    2.获得以标签为内容的子节点
    children
    firstElementChild
    lastElementChild
    获得当前节点的名称:nodeName
    获得当前节点的父节点:parentNode
    创建节点:createElement,--->创建完之后记得添加到指定节点:x.appendChild(y)是将标签添加到父标签的最后一个子节点
    insertBefore(新标签,旧标签)添加到某个标签之前
    replaceChild(新标签,旧标签)替换某个标签
    removeChild()删除标签
    document常用方法和属性:
    常用属性:body
    title
    domain
    url

    var body = document.body;
    console.log(body)
    
    var title = document.title;
    console.log(title)
    
    //domain:域名
    //http:通信协议
    //www.baidu.com域名
    var domain = document.domain;
    console.log(domain)
    
    var url = document.url;
    console.log(url)
    
    //标签的可视属性
    var wrap = document.querySelector("#wrap");
    console.log(wrap.id);
    console.log(wrap.className);
    console.log(wrap.style);
    var img = document.querySelector("img");
    img.src = "";
    img.alt = "";
    //添加额外的可视属性
    wrap.setAttribute("hello","值");//设置属性
    var value = wrap.getAttribute("hello")//得到属性
    wrap.removeAttribute("hello")//移除属性
    console.log(value)
    //添加不可视的属性
    wrap.name = "你好"
    
    //1.offsetLeft,offsetTop,offsetWidth,offsetHeight
    //2.clientWidth,clientHeight,scrollHeight,scrollWidth,scrollLeft,scrollTop
    
    //offsetLeft,offsetTop,offsetWidth,offsetHeight是不包含margin的 
    //clientWidth,clientHeight不包含border和margin
    //scrollHeight,scrollWidth是可滚动范围
    //scrollLeft,scrollTop设置滚动开始的位置
    

    相关文章

      网友评论

          本文标题:JS之DOM

          本文链接:https://www.haomeiwen.com/subject/bchwnftx.html