• js对象


    JS操作document对象

      找到对象   document.getElementById()返回对拥有指定 id 的第一个对象的引用。 document.getElementsByName()返回带有指定名称的对象集合。

           document.getElementsByTagName()返回带有指定标签名的对象集合。 document.getElementsByClassName()返回对拥有指定 class 的对象集合。

      操作对象  

        操作属性    取值 getAttribte()  document.getElementsByTagName("标签名")[0].getAttribute("属性名");  

              赋值 setAttribte()  document.getElementsByTagName("标签名")[0].setAttribute("属性名","属性值");

              删除属性 removeAttribute() document.getElementsByTagName("标签名")[0].removeAttribute("属性名");

        操作样式  内联样式  style.xxxx

              class  className   把class当成属性来看  element.className = 'blue';

             操作内容  表单元素   value    document.getElementById("id名字").value;

              非表单元素     innerHTML  document.getElementById("id名字").innerHTML="<a href='https://www.baidu.com'>到百度</a> ";

                     innerText     document.getElementById("id名字").innerText="<a href='https://www.sina.com'>到新浪</a> ";

        操作节点       1、整个文档时一个文档节点。2、每个HTML元素是元素节点。3、HTML元素内的文本是文本节点。4、每个HTML属性是属性节点。

              5、每个注释是注释节点。所以HTML DOM 将 HTML 文档视作树结构,这种结构被称为节点树。通过 HTML DOM,

                节点树中的所有节点都可以通过 JS 进行访问。所有 HTML 元素(节点)均可被修改。

              创建节点、追加节点   createElement(标签名)创建一个元素节点(具体的一个元素)  appendChild(节点)追加一个节点。

                        createTextNode(节点文本内容)创建一个文本节点

              插入节点  appendChild(节点)也是一种插入节点的方式,还可以添加已经存在的元素,会将其元素从原来的位置移到新的位置。

                    insertBefore(a,b)是参照节点,意思是a节点会插入b节点的前面。

              删除、移除节点   removeChild(节点) 删除一个节点,用于移除删除一个参数(节点)。其返回的被移除的节点,被移除的节点仍在文档中,只是

                      文档中已没有其位置了      var removeChild = document.body.removeChild(div1);//移除document对象的方法div1  

              替换节点   replaceChild(插入的节点,被替换的节点) ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要被替换的节点。

                   返回的是被替换的节点。 var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2

              查找节点   childNodes 包含文本节点和元素节点的子节点

                   children也可以获取子节点,而且兼容各种浏览器  console.log(oList.children);//在控制器日志中显示oList子节点

                   parentNode:获取父节点

                          var oList = document.getElementById('list');//oList是做的ul的对象 

                          var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
                          //通过子节点查找父节点//parentNode:获取父节点
                          console.log(oChild.parentNode);//在控制器日志中显示父节点
                          console.log(oList.children);//在控制器日志中显示oList子节点
                          console.log(children.length)//子节点的个数

                   nextSibling 查找下一个兄弟节点

                   previousSibling  查找上一个兄弟节点

    对元素节点的所有操作

    element.accessKey 设置或返回元素的快捷键。
    element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
    element.attributes 返回元素属性的 NamedNodeMap。
    element.childNodes 返回元素子节点的 NodeList。
    element.className 设置或返回元素的 class 属性。
    element.clientHeight 返回元素的可见高度。
    element.clientWidth 返回元素的可见宽度。
    element.cloneNode() 克隆元素。
    element.compareDocumentPosition() 比较两个元素的文档位置。
    element.contentEditable 设置或返回元素的文本方向。
    element.dir 设置或返回元素的内容是否可编辑。
    element.firstChild 返回元素的首个子。
    element.getAttribute() 返回元素节点的指定属性值。
    element.getAttributeNode() 返回指定的属性节点。
    element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
    element.getFeature() 返回实现了指定特性的 API 的某个对象。
    element.getUserData() 返回关联元素上键的对象。
    element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。
    element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。
    element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。
    element.id 设置或返回元素的 id。
    element.innerHTML 设置或返回元素的内容。
    element.insertBefore() 在指定的已有的子节点之前插入新节点。
    element.isContentEditable 设置或返回元素的内容。
    element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
    element.isEqualNode() 检查两个元素是否相等。
    element.isSameNode() 检查两个元素是否是相同的节点。
    element.isSupported() 如果元素支持指定特性,则返回 true。
    element.lang 设置或返回元素的语言代码。
    element.lastChild 返回元素的最后一个子元素。
    element.namespaceURI 返回元素的 namespace URI。
    element.nextSibling 返回位于相同节点树层级的下一个节点。
    element.nodeName 返回元素的名称。
    element.nodeType 返回元素的节点类型。
    element.nodeValue 设置或返回元素值。
    element.normalize() 合并元素中相邻的文本节点,并移除空的文本节点。
    element.offsetHeight 返回元素的高度。
    element.offsetWidth 返回元素的宽度。
    element.offsetLeft 返回元素的水平偏移位置。
    element.offsetParent 返回元素的偏移容器。
    element.offsetTop 返回元素的垂直偏移位置。
    element.ownerDocument 返回元素的根元素(文档对象)。
    element.parentNode 返回元素的父节点。
    element.previousSibling 返回位于相同节点树层级的前一个元素。
    element.removeAttribute() 从元素中移除指定属性。
    element.removeAttributeNode() 移除指定的属性节点,并返回被移除的节点。
    element.removeChild() 从元素中移除子节点。
    element.replaceChild() 替换元素中的子节点。
    element.scrollHeight 返回元素的整体高度。
    element.scrollLeft 返回元素左边缘与视图之间的距离。
    element.scrollTop 返回元素上边缘与视图之间的距离。
    element.scrollWidth 返回元素的整体宽度。
    element.setAttribute() 把指定属性设置或更改为指定值。
    element.setAttributeNode() 设置或更改指定属性节点。
    element.setIdAttribute()
    element.setIdAttributeNode()
    element.setUserData() 把对象关联到元素上的键。
    element.style 设置或返回元素的 style 属性。
    element.tabIndex 设置或返回元素的 tab 键控制次序。
    element.tagName 返回元素的标签名。
    element.textContent 设置或返回节点及其后代的文本内容。
    element.title 设置或返回元素的 title 属性。
    element.toString() 把元素转换为字符串。
    nodelist.item() 返回 NodeList 中位于指定下标的节点。
    nodelist.length 返回 NodeList 中的节点数。

    window对象

      windows   属性  代表父窗体   window.opener.test(); ---调用父窗体中的test()方法

          方法   打开/关闭窗口   window.open([URL], [窗口名称], [参数字符串]) 

                    window.open([URL], [窗口名称], [参数字符串])window.open('https://www.baidu.com','_blank','width=300,height=200,scrollbars=yes')                    close()  window.close();   //关闭本窗口

             定时器  setTimeout()时间到了, 就会执行一个指定的method/function

                  setTimeout("changeState()",1000 );  function changeState(){  alert("这是等待三秒"); } 

                  setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

                   var biao = 0; setInterval("changeState()",1000 ); function changeState(){ biao++;alert(biao)} 

                          清除定时器    var timer1=window.setTimeout(function(){},1000); //timer1->1 当前是第一个定时器

                    var timer2=window.setTimeout(function(){},1000); //timer2->2 当前是第二个定时器

                    window.clearTimeout(timer1);window.clearInterval(timer2)

             scrollTo(); scrollTo() 方法可把内容滚动到指定的坐标。window.scrollTo(100,500);

             moveTo()  将窗口移动到某一位置

        location  属性  href  用脚本来跳转页面  window.location.href = "https://www.baidu.com";

                       方法  reload()  刷新页面  window.location.reload();

        history   方法  go()  history.go(num)表示向前或向后翻多少页,num为正数表示向前翻,为负数则向后翻。                                

  • 相关阅读:
    软件项目管理总体流程设计
    Delphi 编译时 提示 Internal error: URW3537 错误
    Oracle OLEDB 的手工分发
    Oracle10g Client的手工分发
    Delphi 处理在字符串截取中避免出现半个汉字
    Oracle ODP.Net 的手工分发
    项目中问题解决杂谈audio
    按钮 stylesheet 字符串;
    pb使用
    web测试和app测试的重点
  • 原文地址:https://www.cnblogs.com/zqy6666/p/11871778.html
Copyright © 2020-2023  润新知