27 节点、表格获取

节点

DOM

DOM w3c提供用来操作页面的标准接口

页面在生成的时候, 会形成一个树状结构, 每个标签都在树状结构的某一个位置, 称之为节点这个树状结构称之为DOM树

节点属性

nodeName: 节点名称标签--LI P DIV

nodeType: 1--12的数字 1--标签 2---属性 3---文本 8--注释 9--document

nodeValue: 节点内容只有文本节点才有内容

获取子节点

children: 属性非标准属性只标签节点

childNodes: 属性标准属性标签、文本、注释 ie8以下只获取标签节点

var ul = document.getElementsByTagName('ul')[0];

// 非标准属性  children   只标签节点
var childs = ul.children;
console.log(childs);

// 标准属性 childNodes  标签、文本、注释  ie8以下 只获取标签节点
var childs1 = ul.childNodes;
console.log(childs1);

for(var i = 0; i < childs1.length; i++){
    // console.log(childs1[i].nodeName);
    // console.log(childs1[i].nodeType);
    // console.log(childs1[i].nodeValue);
    // 是不是标签节点
    if(childs1[i].nodeType == 1){
        // 获取子节点
        console.log(childs1[i].childNodes); // NodeList  集合
        console.log(childs1[i].childNodes[0].nodeValue); // 获取标签节点的内容
    }
}

获取父节点

直接父节点: parentNode
具有定位属性的最近的父节点如果没有的话获取的就是body: offsetParent

var span = document.getElementsByTagName('span')[0];
console.log(span);
console.log(span.parentNode.parentNode);
console.log(span.offsetParent);

获取其他节点

首节点

获取首节点:

firstChild: 标准获取在标准: 获取换行 ie8及以下：标签

firstElementChild: 非标准在标准: 标签 ie8: undefined

兼容：元素.firstElementChild || 元素.firstChild

var ul = document.getElementsByTagName('ul')[0];
console.log(ul);
console.log(ul.firstChild);
console.log(ul.firstElementChild);
console.log(ul.firstElementChild || ul.firstChild);

尾节点

获取尾节点：

lastChild: 标准获取在标准: 获取换行 ie8及以下：标签

lastElementChild: 非标准在标准: 标签 ie8: undefined

兼容：元素.lastElementChild || 元素.lastChild

console.log(ul.lastElementChild || ul.lastChild);

上一个兄弟

上一个兄弟节点：

previousSibling: 在ie8: 标签标准: 换行

previousElementSibling: 标准: 标签 ie8: undefined

兼容: 元素.previousElementSibling || 元素.previousSibling

var box = document.getElementsByTagName('li')[4];
console.log(box);
console.log(box.previousSibling);
console.log(box.previousElementSibling);
console.log(box.previousElementSibling || box.previousSibling);

下一个兄弟

下一个兄弟节点：

nextSibling: 在ie8: 标签标准: 换行

nextElementSibling: 标准: 标签 ie8: undefined

兼容: 元素.nextElementSibling || 元素.nextSibling

console.log(box.nextElementSibling || box.nextSibling);

创建节点

创建标签节点： var 变量 = document.createElement('标签名');
创建文本节点: var 变量 = document.createTextNode('内容');
将文本节点追加到标签节点中: 父节点.appendChild(子节点);

// 第一种
var li = document.createElement('li');
console.log(li);
var txt = document.createTextNode('这是一个艰难的过程');
console.log(txt);
li.appendChild(txt);
console.log(li);
ul.appendChild(li);

// 第二种
var li1 = document.createElement('li');
console.log(li1);
li1.innerHTML = '<em>123345</em>';
ul.appendChild(li1);

追加节点

追加到父节点

追加到父节点中：父节点.appendChild(子节点)

将子节点加到父节点的末尾

注意: 如果操作页面中已经存在的节点，不会新创建节点, 而是发生物理位移;

var li = document.createElement('li');
console.log(li);
li.innerHTML = '12345';

var ul = document.getElementsByTagName('ul')[0];
ul.appendChild(li); // li添加到了第一个ul中

var ul1 = document.getElementsByTagName('ul')[1];
ul1.appendChild(li);

插入到某个节点之前

父节点.insertBefore(新节点, 参考节点);

var box = document.getElementsByClassName('box')[0];
var li2 = document.createElement('li');
li2.innerHTML = '这是插队的节点';

ul.insertBefore(li2, box);

克隆节点

克隆节点：节点.cloneNode(布尔值)

true: 克隆其中的内容

false: 只克隆节点不克隆内容默认

返回一个新的节点

// var newE = box.cloneNode();
var newE = box.cloneNode(true);
console.log(newE);

ul.appendChild(newE);

删除节点

删除子节点

父节点.removeChild(子节点);

返回被删除的节点

var re = ul1.removeChild(li);
console.log(re);

删除自己及其中节点

节点.remove(); 没有返回值

var rel = ul1.remove();
console.log(rel);

替换节点

替换子节点

父节点.replaceChild(新节点, 参考节点);

返回被替换的节点

var r = box.replaceWith(li);
console.log(r); // undefined

var li3 = document.createElement('li');
li3.innerHTML = '<em>123456</em>';

替换自身

节点.replaceWidth(新节点); 没有返回值

// 获取第一个子节点
var first = ul.firstElementChild || ul.firstChild;
console.log(first);

var rel = ul.replaceChild(li3, first);
console.log(rel);

属性操作

点:

var 变量 = 元素.属性名;

元素.属性名 = 值;

var 变量 = 元素['属性名'];

元素['属性名'] = 值;

1.2 不能操作自定义属性

获取属性值: 节点.getAttribute('属性名');

class不需要写成className

设置属性值: 节点.setAttribute('属性名', '属性值');

3.4 能操作自定义属性

// div.className = 'b';
// console.log(div.className);

// div['className'] = 'a';
// console.log(div['className']);

// console.log(div.tag); // undefined
// console.log(div['tag']); // undefined

// div.tag = 'aaa';
// console.log(div['tag']); // aaa


console.log(div.getAttribute('class'));

div.setAttribute('class', 'b');
console.log(div.getAttribute('tag')); // 123
div.setAttribute('tag', 'aaa123');

表格获取

// 1. 获取表格 table
var table = document.getElementsByTagName('table')[0];
console.log(table);

// 2. 获取表格头
console.log(table.tHead);

// 3. 获取表格脚
console.log(table.tFoot);

// 4. 获取表格体  可以有多个表格体  获取到的是一个集合
console.log(table.tBodies);

// 获取第一个表格体
console.log(table.tBodies[0]);

// 5. 获取表格中的行 
console.log(table.rows); // 表格中所有的行
console.log(table.tBodies[0].rows); // 第一个表格体中所有的行

// 6. 获取表格中的单元格  
// 表格由行组成        行由单元格    
// 单元格只能通过行来获取
console.log(table.tBodies[0].rows[0].cells);

console.log(table.cells); // undefined

posted @ 2021-05-07 21:52 一花一世界111 阅读(83) 评论(0) 收藏举报

刷新页面返回顶部

一花一世界111

27 节点、表格获取