前端入门到熟悉day18

数组操作
Array(数组)对象方法
方法 描述
concat() 连接两个或更多的数组,并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串,并返回结果。
toLocaleString() 把数组转换为本地数组,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值

01数组

02数组length

03数组添加

04数组删除

05splice

06concat

07join

08数组排序

09slice

DOM初级
DOM document object model 文档对象模型
DOM 节点
通过这个DOM操作拿到HTML(document) 上面的所有东西
document.getElementById
document.getElementsByTagName
document.getElementsByClassName
IE 老版本(8以下) 10% 9之后支持很多
chrome/safi 60%
FF 99%

HTML 文档中的所有内容都是节点:
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

元素.childNodes     (存在兼容性,不推荐使用,推荐使用另一个 children)
      元素.children  (不管在标准还是非标准下,只包含元素类型的节点。推荐使用)
    特点:只读属性。
    代表:子节点列表集合,试剂盒就有长度,可使用数组形式获取
    只包含儿子子节点,不包含孙子子节点
    获取:实行 [] 下表获取
    标准模式下(非IE):childNodes 包含了文本和元素类型节点,也会包含非法嵌套的子节点(注意:不是孙子节点)
    非标准:childNodes只包含元素类型的节点。ie7以不会包含非法嵌套子节点
    ul元素下面的所有子元素都包括在这个childNodes属性里面
DOM里面定义了12种节点:
一般地,节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。
元素.nodeType     1 
  只读属性,代表当前元素的类型
  nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常数值
 
元素.attributes
  只读属性,代表当前元素的属性是什么(如:id,border,,,等属性)
  属性列表集合
  属性的名称:元素.attributes[0].name
  属性的值:元素.attributes[0].value

01子节点

  • 1
  • 2
02子节点
  • 1
  • 2

if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.color=‘red’;
}
}

03子节点

  • 1
  • 2

for(var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background=‘red’;
}
}

04子节点

  • aadsdads sdadasda
  • 2
06父节点的应用

for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
this.parentNode.style.display=‘none’;
}
}
}
//parentNode 确定父节点是最直接最靠近的那个父元素

07offsetParent

08firstChild

09元素属性操作
元素属性操作
第一种:oDiv.style.display=“block”;
第二种:oDiv.style[“display”]=“block”;
第三种:Dom方式

DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)

oBtn.onclick=function(){
// oTxt.value=‘我好帅’;
// oTxt[‘value’]=‘我好漂亮’;
// oTxt.setAttribute(‘value’,‘我好骚’);
// oTxt.removeAttribute(‘data-id’);
alert( oTxt.value);
}
}

10className

DOM中级
01创建元素

    oBtn.onclick=function(){
    //创建li元素
    var oLi=document.createElement(‘li’);
    //把li追加到ul里面去
    oUl.appendChild(oLi);
    }
    }

    02创建元素2

      oBtn.onclick=function(){
      var oLi=document.createElement(‘li’);
      //往li里面写内容
      oLi.innerHTML=oTxt.value;
      oUl.appendChild(oLi);
      oTxt.value=’’;
      }
      }

      03创建元素3

        猜你喜欢

        转载自blog.csdn.net/weixin_44160944/article/details/87920935