DOM笔记 - javascript - php中文网博客

首页 > 博客列表 > DOM笔记

博主信息

博文 22

粉丝 0

访问量 16286

专题推荐

更多>

实例

<ul id="lists">
        <li id="item1">列表项01</li>
        <li>列表项02</li>
        <li id="item2">列表项03</li>
        <li>列表项04</li>
        <li id="item3">列表项05</li>
    </ul>

    <script>
    // 通过函数来简化以上的操作
    function getElements(){ //参数是多个id字符串
        let elements = {};  //保存获取到的dom对象元素
        for(let i=0;i<arguments.length;i++){
            let id = arguments[i];  //获取参数id的字符串
            let elt = document.getElementById(id);  //根据id字符串
            if(elt === null){
                throw new Error('没有这个元素'+id); //抛出异常
            }
            elements[id] = elt; //将获取到的元素保存到结果集合中
        }
        return elements;    //将获取到的元素返回
    }
    // 根据id获取页面上的指定元素，返回一个关联数组对象，键名就是id
    let elements = getElements('item1','item2','item3');
    console.log(elements);
    for(let key in elements){
        elements[key].style.backgroundColor = 'red';
    }
    </script>

2.根据name属性获取元素

实例

<!-- name属性并不是所有元素都有，只有一些特定元素才会有，表单，表单内的元素，图像，ifrane -->
<form action="" name="login">
    <input type="text" name='username'>
    <input type="password" name='password'>
    <button name="botton">提交</button>
</form>
<script>
    // getElementsByName返回的是一个节点数组
    let login = document.getElementsByName('login')[0]
    // console.log(login);
    // 我们可以把name属性当成document对象的属性来用
    let login1 = document.login;
    // console.log(login1);
    login1.style.backgroundColor = 'green';
</script>

可以把name属性当成文档对象属性来使用

3.根据标签名来获取元素

实例

<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
<script>

let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'green';
// 返回的是一个元素的集合，就会有一个length
console.log(document.getElementsByTagName('ul').length);

//元素的集合其实是一个对象，它的上面有一个方法：itme（）
let ull = document.getElementsByTagName('ul').item(0);
ull.style.backgroundColor = 'lightblue';

// 获取所有li元素
let uli = document.getElementsByTagName('li')
for(let i=0;i<uli.length;i++){
    uli[i].style.backgroundColor='lightpink';
}

// 改方法不仅定义文档对象，还可以在元素对象上使用
let ui = document.getElementsByTagName('ul').item(0);
let uli1 =  ui.getElementsByTagName('li').item(1);
uli1.style.backgroundColor = 'green';
</script>

4.name属性和标签名获取元素的快捷方式

实例

<img src="../images/截图/timg.jpg" alt="" name="pic">
<form action="" name="register">
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码不少于8位">
    <button>提交</button>
</form>
<p><a href="http://www.php.cn" name="php">php中文网</a></p>
<script>
// 以文档对象的方式来访问这些特定的元素集合
// document.images:获取所有的img元素，返回是一个数组
document.images[0].style.width = '100px';       //1.标签的数字索引访问
document.images['pic'].style.width = '200px';   //2.使用name属性值获取元素
// 如果把images看成对象，name就可以看成属性
document.images.pic.style.width = '300px';      //3.name作为images对象的属性

//forms属性：获取到页面中的所有form
// 1.索引
// 2.name属性值
// 3.name作为form表单的对象属性
// 4.使用元素集合item（）方法
document.forms[0].style.backgroundColor = 'lightgreen'; 
document.forms['register'].style.backgroundColor = 'red';
document.forms.register.style.backgroundColor = 'lightblue';
document.forms.item(0).style.backgroundColor = 'lightgreen';

// links 链接A
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'yellow';

// 获取body
document.body.style.backgroundColor = 'lightblue';

// 获取head
// 插入了一条空的style标签
let style = document.createElement('style');    //createElement通过指定名称创建一个元素
document.head.appendChild(style);

// documentElement获取html
console.log(document.documentElement);

// doctype获取文档类型
console.log(document.doctype);
</script>

5.通过class属性来获取元素

实例

<ul class="ul">
    <li class="red">列表项01</li>
    <li>列表项02</li>
    <li class="green">列表项03</li>
    <li>列表项04</li>
    <li class="coral large">列表项05</li>
</ul>
<script>
// 根据class来获取元素
let red = document.getElementsByClassName('red')[0];
red.style.backgroundColor = 'red';

// 该方法不仅可以在document对象上调用，也可以在元素上调用，一般是在父元素上调用
let ul = document.getElementsByClassName('ul')[0];
let green = ul.getElementsByClassName('green').item(0);
green.style.backgroundColor ='green';

// class支持多值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'red';
</script>

6.通过css选择器来获取元素

实例

    <ul id="ul">
        <li class="red">列表项1</li>
        <li class="green">列表项2</li>
        <li>列表项3</li>
        <li class="green">列表项4</li>
        <li class="cpral large">列表项5</li>
    </ul>
<script>
// 选择页面元素最简单的方式就是用css选择器
// querySelectorAll返回一个元素的集合
let lists = document.querySelectorAll('li');    //根据标签选择器li来获取
console.log(lists);

// 该方法也可以在元素上调用
// querySelector   返回满足条件的一个
// querySelectorAll 返回满足条件的集合
let ul = document.querySelector('#ul');
let li = ul.querySelectorAll('.green');
for(let i=0;i<li.length;i++){
    // 有两个green，所以需要循环出来
    li[i].style.backgroundColor = 'green';
}
</script>

---------------------------------------------------------------------------------------------------------------------------------

DOM操作元素的技巧

1、如何通过DOM方法来遍历文档树

//文档中所有内容都是节点类型

// 节点有文档节点document，元素节点element，text文本节点

// 每个节点对象还有三个最常用的属性：nodetype节点类型，nodename节点名称，nodevalue节点的值

查看顶层的文档节点对象

console.log(document.nodeType);
console.log(document.nodeName);
console.log(document.nodeValue);

//childNodes 获取父节点下的所有子节点

//children 获只取元素子节点

获取body

console.log(document.childNodes[1].childNodes[2]);
// 为了避免文本节点的干扰，js还提供了一套api，仅获取子元素节点（忽略空格）
console.log(document.children[0].children[1]);

实例：

获取ul

let ul = document.children[0].children[1].children[0];
ul.firstElementChild.style.backgroundColor = 'green';   //获取ul下的第一个子元素
ul.lastElementChild.style.backgroundColor = 'red';  //获取ul下的最后一个子元素
console.log(ul.childElementCount);  //获取ul下的子元素的数量
console.log(ul.children.length);    //获取ul下的子元素的数量

获取第三个li

let li1 = ul.children[2];
console.log(li1);

获取兄弟元素，父级元素

li1.nextElementSibling.style.backgroundColor = 'yellow';    //获取下一个兄弟元素，同级的
li1.previousElementSibling.style.backgroundColor = 'cyan';  //获取上一个兄弟元素，同本同级的
li1.parentElement.style.background = 'wheat';   //获取父元素

parentNode返回某节点的父节点，没有则返回null

li1.parentNode.style.backgroundColor = 'red';

2、如何操纵HTML元素的属性？

html元素属性有二类：1.标签自带的原生属性；2.用户自定义的属性

实例

<img src="../images/截图/timg.jpg" alt="" width="320">
<h3 id="header" class="hello" style="color:red" title="当情妇来敲门" index="我是图片">《当情妇来敲门》：别走，情妇终究会到来</h3>

（1）原生属性：看作当前元素对象的属性，进行读写

原生属性

let img = document.getElementsByTagName('img')[0];
img.src = '../images/12.png';// 更新属性
img.width = '400';
// class属性，因为class与js关键字冲突，用classname来表示
let h3 = document.getElementById('header');
console.log(h3.className);
// style属性，它的值不是一个字符串，而是一个对象
h3.style.color = 'green';

（2）自定义属性：（以下四种方法均动态修改属性，并没有影响原生属性的值，除了可以修改自定义属性外也能修改原生属性的值）

hasAttribute 验真指定属性是否存在

getAttribute 返回指定属性的值

setAttribute 添加属性并为其赋值

removeAttribute 移出指定属性

自定义属性实例

if(h3.hasAttribute('index')){
    console.log(h3.getAttribute('index'));      //查看index属性
    h3.setAttribute('index1','我是一张图片');    //添加index1属性
    h3.removeAttribute('index1');               //移除index1属性
}

（3）如何处理HTML元素中的内容

元素的内容主要分两类:

1.纯文本

2.html代码

实例

<p>我正在学习javascript编程技术</p>
<p>我正在学习<strong style="color:red;">javascript</strong>编程技术</p>

innerhtml：将元素内容全部读出，包括html代码

实例

let p1 = document.getElementsByTagName('p')[0];
let p2 = document.getElementsByTagName('p').item(1);
console.log(p1.innerHTML);
console.log(p2.innerHTML);

textContent仅获取纯文本

console.log(p1.textContent);
console.log(p2.textContent);

使用节点对象的方式输出文本：

if(p1.childNodes[0].nodeType === 3){
    console.log(p1.childNodes[0].nodeValue);
}

p2也可以使用上述例子输出文本，但是text中混杂了<strong>元素标签所以并不能完全输出

（4）DOM节点的创建/插入/删除/更新操作

创建新节点

let ul = document.createElement('ul');
// 2.将新元素添加到页面中，要在父元素上调用
document.body.appendChild(ul);
// 3.在ul中添加子元素
ul.innerHTML = '<li>我是列表项1</li>'

插入新节点

appendchild（）默认是插入到父节点的尾部

let li = document.createElement('li');
li.innerHTML = '我是列表项2';
ul.appendChild(li); //默认是插入到父节点的尾部

如果我想在任意位置插入，应该怎么办？

insertBefore（'新节点','插入的位置'）

let li1 = document.createElement('li');
li1.innerHTML = '我是列表项3';
// insertBefore('新节点','插入的位置')
ul.insertBefore(li1,li);

如果插入新元素末尾是一个空值

inserbefore等价于appendchild

let li2 = document.createElement('li');
li2.innerHTML = '我是列表项4';
// ul.insertBefore(li2,null);
ul.appendChild(li2);

删除子节点

ul.removeChild(li2);

替换新的子节点

let li3 = document.createElement('li');
li3.innerHTML = '我是新替换li的节点';
ul.replaceChild(li3,li);

---------------------------------------------------------------------------------------------------------------------------------

DOM实战：

1、聊天信息生成原理

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>提交</title>
</head>
<body>
<input type="text" name="info">
<button>提交</button>
<ul></ul>
<script>
let input = document.getElementsByName('info')[0];
let button = document.getElementsByTagName('button')[0];
let ul = document.getElementsByTagName('ul')[0];
button.onclick = function(){
        let li = document.createElement('li');
        li.innerHTML = input.value;
        ul.appendChild(li);
        input.value = '';
}
</script>    
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

关于DOM

2019-01-21 09:01:57