码迷,mamicode.com
首页 > Web开发 > 详细

js dom

时间:2018-10-09 15:39:24      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:创建元素   attribute   eval   style   color   nodevalue   ali   表示   center   

Js dom

元素节点:

分类:元素节点,属性节点,文本节点,注释节点

nodeName nodeValue nodeType

 元素节点  标签名 null  1

 属性节点  属性名 属性值  2

 文本节点  #text 文本值      3

 注释节点#comment 注释内容  8

获取节点所有的子节点: 节点.childNodes

获取节点所有属性节点: 节点.attributes

元素节点的4种获取方式

document.getElementById(传入id);

document.getElementsByClassName(传入样式名x)[0];表示第一个样式名为x的标签

document.getElementsByTagName(传入标签名y)[0];表示第一个标签名为y的标签

Document.getElementsByName(传入name属性名z)[0];表示第一个name属性名为z标签

获取的所有子节点返回的是一个数组:

Demo

<div id="box" class="div" style="width: 30px;height: 50px;" name="nana">我是一个文本节 <!--我是注释节点--><span name="nana">我是一个span标签</span></div>

var oDiv = document.getElementById("box");

console.log( oDiv.childNodes );

var oDivChilds = oDiv.childNodes;

console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType );

console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType );

节点的层次关系

var oDiv = $("box");

console.log( oDiv.innerText );

console.log( oDiv.innerHTML);

innerTextinnerHTML的区别:

前者是获取标签内的内容,把标签里的标签视为内容读出,包括标签里的标签的内 容。

或者是获取标签的内容,把标签里的标签视为内容读出;

console.log( oDiv.firstChild );获取标签内的第一个子节点

注意:第一个节点不一定是标签内的元素,还有可能为回车!!

console.log( oDiv.lastChild );获取标签内的最后一个子节点

console.log( oDiv.parentNode );获取标签的父节点

兄弟节点:

console.log( oDiv.previousSibling );获取前一个兄弟节点

console.log( oDiv.nextSibling);获取下一个兄弟节点

console.log( oDiv.owerDocument );获取根节点

 创建元素节点:

document.creatElement(“div”);创建一个div标签

var oDiv = document.createElement("div");

设置样式:

oDiv.className = "box";

oDiv.style.backgroundColor = randomColor();

操作元素节点:

document.createElement();创建元素节点

添加到父节点:

父节点.appendChild(子节点);

父节点.insertBefore(新节点,旧节点);在旧节点的父元素下的旧节点之前添加节点

父节点.removeChild(子节点);删除节点

父节点.replaceChild(新节点,旧节点);替换节点

父节点.cloneNode();克隆节点,不克隆子节点;

父节点.cloneNode(true);克隆节点,克隆子节点;

document.creatTextNode(“文本值”);创建文本节点;

 

js dom

标签:创建元素   attribute   eval   style   color   nodevalue   ali   表示   center   

原文地址:https://www.cnblogs.com/shangXR/p/9760374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!