zoukankan      html  css  js  c++  java
  • JavaScript基础-----(DOM操作的内容)

    查询元素

      1.直接访问指定节点的方法

        getElementById():返回一个节点对象        id

        getElementByName():返回多个(节点数组)    名字

        getElementByTagName():返回多个(节点数组)  标签名

      2.间接根据层次关系查找节点

        父节点

          parentNode

        孩子节点

          childNodes 数组对象,表示该节点的多有子节点的集合

          firstChild   lastChild

        兄弟节点

          nextSibling  previousSiBling

    操作文本

      1.对于<p></p>、<hn></hn>、<div></div> <span></span>等标签,操作内部文本都使用innetHTML或者innerText

       对于表单项input、select等标签,获取值使用value(属性的操作)

       对于img等标签,不涉及文本

      2.innerHTML   指的是从对象的起始位置到终止位置的全部内容,包括html标签

        innerText    指的是从起始位置到终止位置的内容,但它能去除HTML标签

    操作属性

      方法1:setAttribute(属性名,属性值)和getAttribute(属性名)

      方法2  .属性名

      方法1可以对自定义属性进行操作;但是方法2只能对标准属性进行操作

    操作元素

      创建节点的方法

        document.createElement("div")

      加入节点的方法

        parentNode.appendChild(childElement):  末尾追加式插入节点

        parentNode.insertBefore(newNode,beforeNode):  在指定节点前插入新节点

      删除节点方法

        parentNode.removeChild(childNode)

      替换节点方法

        parentNode.replace(newNode,oldNode) 

    操作css

      使用style对象操作css

        每个style对象对应为该元素指定的css,而每个css属性-对应于style对象的属性

          对于单个单词的css属性,在style对象中的属性名称不变

          对于双单词或多单词属性改写为驼峰命名法。例font-size 为fontSize

          注意:是JavaScript的style对象,不是html标签的style属性,但是有对应关系

  • 相关阅读:
    嵌套矩形
    Multiplication Puzzle
    animate.css在vue项目中的使用
    服务器相关知识
    webpack-cli安装和插件的安装
    新买阿里云linux服务器如何设置账号密码xshell远程登陆
    主流请求库axios库的使用
    什么是回调函数
    js------match() 方法
    cookie
  • 原文地址:https://www.cnblogs.com/skyline1/p/12184726.html
Copyright © 2011-2022 走看看