js dom

Posted on Posted in js
Tips: 本文创建于2014年5月20日,已超过 2 年,内容或图片可能已经失效!

dom

document
dom对html文档进行了各种节点的划分
内容:元素节点、属性节点、文本节点、注释节点、CDATA

元素节点对象操作

获取元素节点的方法
1、document.getElementsByTagName(元素标签名字);
2、document.getElementByID(ID);
3、document.getElementsByName(name属性值); //通常在form表单里使用,有兼容性问题

[code lang="js"]
// 方法一
<div>content--001</div>
<div>content--002</div>
<div>content--002</div>
<script type="text/javascript">
function s(s) {
document.write(s);
}
var dv = document.getElementsByTagName('div');
document.write(dv[0]);
s(dv.item(0));
</script>
// 方法二
<input type="text" id="username" value="用户名" />
<script type="text/javascript">
function s(s) {
document.write(s);
}
var it = document.getElementById('username');
s(it);
</script>
// 方法三
<input type="checkbox" name="hobby" value="足球" />
<script type="text/javascript">
function s(s) {
document.write(s);
}
var hb = document.getElementsByName('hobby');
s(hb[0]);
s(hb.item(0));
</script>
[/code]

判断节点类型nodeType

节点.nodeType
1:元素节点
2:属性节点
3:文本节点
4:CDATA节点
9:document文档节点

[code lang="js"]
<input type="checkbox" name="hobby" value="足球" />
<script type="text/javascript">
function s(s) {
document.write(s);
}
var hb = document.getElementsByName('hobby');
s(hb[0].nodeType) // 返回1
</script>
[/code]

属性节点获取

<input type="text" name="username" id="userA" value="tom" class="apple" />
元素对象.属性
node.name
node.id
node.value

属性设置:
node.属性名称=值
属性设置只是针对w3c规定的属性起作用,自定义属性不行

都起作用的通用方法
获取属性:node.getAttribute(属性名称);
设置属性:node.setAttribute(名称,值);

[code lang="js"]
<input hill="white" type="text" name="username" id="userA" value="tom" class="apple" />
<script type="text/javascript">
function s(s) {
document.write(s);
}
function $(id){
return document.getElementById(id);
}
s('<br />');
s($('userA').type);
s('<br />');
s($('userA').getAttribute('hill'));
s('<br />');
s($('userA').setAttribute('type','file'));
[/code]

属性节点具体获取

元素节点对象.attributes; // 以列表形式返回全部属性
元素节点对象.attributes.名称;

[code lang="js"]
<input hill="white" type="file" name="username" id="userA" value="tom" class="apple" />
<br />
</body>
<script type="text/javascript">
var it = $('userA');
var attr = it.attributes;
s(attr.type.nodeType); // 2 属性节点
s(attr.type)

function s(s) {
document.write(s);
}
function $(id){
return document.getElementById(id);
}
</script>
[/code]

元素节点相关属性

childNodes 所有子节点 // 在dom中会把空白也当作一个子节点
childNodes[0] 第一个子节点
childNodes.item(0) 第一个子节点

parentNode 获得该节点的父元素节点
nextSibling 下个兄弟节点
previousSibling 上个兄弟节点

firstChild 第一个子节点
lastChild 最后一个子节点

[code lang="js"]
<body>
<ul><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul>
<br />
</body>
<script type="text/javascript">
var uul = document.getElementsByTagName('ul')[0];
// 获得所有的子节点
var sons = uul.childNodes;
console.log(sons.length); // 9 个子节点,注意空白
console.log(sons[2]);
console.log(uul.parentNode); // 父节点
console.log(uul.parentNode.parentNode);

function s(s) {
document.write(s);
}
function $(id){
return document.getElementById(id);
}
</script>
[/code]

节点的创建追加

创建
元素节点:document.createElement(标签名称);
文本节点:document.ceateTextNode(文本节点);
设置属性信息:setAttribute(name,value);

节点追加
父节点.appendChild(子节点);
父节点.insertBefore(new_node,old_node); // 新节点会放到某个节点的前面
父节点.replaceChild(new_node,old_node);

[code lang="js"]
// 例子一
<script type="text/javascript">
// 节点创建追加
var uul = document.createElement('ul');
var li = document.createElement('li');
var txt = document.createTextNode('文本');
// 追加
li.appendChild(txt);
uul.appendChild(li);
document.body.appendChild(uul);
</script>
// 例子二
<body>
<div id="first"></div>
<div id="second"></div>
<br />
</body>
<script type="text/javascript">
// 节点创建追加
var uul = document.createElement('ul');
var li = document.createElement('li');
var txt = document.createTextNode('文本');
// 追加
li.appendChild(txt);
uul.appendChild(li);
// 追加到div里面
document.getElementById('first').appendChild(uul);
document.getElementById('second').appendChild(uul); // 只追加到这里了
</script>
// 例子三
<body>
<ul><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul>
<br />
</body>
<script type="text/javascript">
// 创建一个li
var li = document.createElement('li');
var txt = document.createTextNode('人');
li.appendChild(txt);

var uul = document.getElementsByTagName('ul')[0];
// uul.appendChild(li); // 人在最后

// 追加到秋前
// uul.insertBefore(li,uul.lastChild.previousSibling);

//使用新节点替换 夏
uul.replaceChild(li,uul.firstChild.nextSibling);
</script>
[/code]

dom复制节点

cloneNode(true); 深层复制[默认]
<li>花</li>
<div><span>hello</span></div>
cloneNode(false); 浅复制 只复制一层

[code lang="js"]
<body>
<ul><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul>
<br />
</body>
<script type="text/javascript">
var uul = document.getElementsByTagName('ul')[0];
var xia = uul.firstChild.nextSibling;
// 复制夏,放冬后面
var fu_xia = xia.cloneNode(); // 默认 ???
uul.appendChild(fu_xia);
</script>
[/code]

节点删除

IE删除
<div><span>hello</span></div>
节点.removeNode([false]); 浅层删除[默认]
节点.removeNode(true); 深层删除

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

[code lang="js"]
<body>
<ul><li>春</li><li>夏</li><li>秋</li><li>冬</li></ul>
<br />
</body>
<script type="text/javascript">
var uul = document.getElementsByTagName('ul')[0];
// 删除秋节点
uul.removeChild(uul.lastChild.previousSibling);
</script>
[/code]

css样式属性

样式操作
获取:元素节点.style.样式属性名称;
设置:元素节点.style.样式名称=值

[code lang="js"]
<body>
<div style="width:200px;height:150px;color:red;background-color:pink;font-size:16px;">goods</div>
</body>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
//css样式获取
console.log(dv.style.width);
console.log(dv.style.height);
console.log(dv.style.color);
console.log(dv.style.backgroundColor);
// 设置css样式
dv.style.backgroundColor = "purple";
</script>
[/code]

常用属性

nodeName 获得元素节点对应标签名称
nodeValue 获得文本节点包含的文本内容

» 转载请注明来源:若我若鱼 » js dom

Leave a Reply

Your email address will not be published. Required fields are marked *

3 × 1 =